diff --git a/src/routes/health/+server.ts b/src/routes/health/+server.ts
index 36f425ac..d98cf10d 100644
--- a/src/routes/health/+server.ts
+++ b/src/routes/health/+server.ts
@@ -6,14 +6,17 @@ import type { RequestHandler } from './$types';
  * Used by Docker and Nginx to verify the service is running.
  */
 export const GET: RequestHandler = async () => {
-    return json({
-        status: 'healthy',
-        timestamp: new Date().toISOString(),
-        service: 'aether-app-sveltekit',
-        node_env: process.env.NODE_ENV || 'development'
-    }, {
-        headers: {
-            'Cache-Control': 'no-cache'
+    return json(
+        {
+            status: 'healthy',
+            timestamp: new Date().toISOString(),
+            service: 'aether-app-sveltekit',
+            node_env: process.env.NODE_ENV || 'development'
+        },
+        {
+            headers: {
+                'Cache-Control': 'no-cache'
+            }
         }
-    });
+    );
 };
diff --git a/src/routes/hosted_files/+layout.svelte b/src/routes/hosted_files/+layout.svelte
index 7efea64b..705147d1 100644
--- a/src/routes/hosted_files/+layout.svelte
+++ b/src/routes/hosted_files/+layout.svelte
@@ -1,34 +1,34 @@
 <script lang="ts">
+/** @type {import('./$types').LayoutData} */
+let log_lvl: number = 1;
+
+// *** Import Svelte specific
+// import { browser } from '$app/environment';
+
+// *** Import other supporting libraries
+import { Brain, House, Library, RefreshCw, Satellite } from '@lucide/svelte';
+
+// *** Import Aether specific variables and functions
+// import type { key_val } from '$lib/ae_stores';
+// import { ae_util } from '$lib/ae_utils/ae_utils';
+import {
+    ae_snip,
+    ae_loc,
+    ae_sess,
+    ae_api,
+    ae_trig,
+    slct,
+    slct_trigger
+} from '$lib/stores/ae_stores';
+// import Element_data_store from '$lib/elements/element_data_store.svelte';
+
+interface Props {
     /** @type {import('./$types').LayoutData} */
-    let log_lvl: number = 1;
+    data: any;
+    children?: import('svelte').Snippet;
+}
 
-    // *** Import Svelte specific
-    // import { browser } from '$app/environment';
-
-    // *** Import other supporting libraries
-    import { Brain, House, Library, RefreshCw, Satellite } from '@lucide/svelte';
-
-    // *** Import Aether specific variables and functions
-    // import type { key_val } from '$lib/ae_stores';
-    // import { ae_util } from '$lib/ae_utils/ae_utils';
-    import {
-        ae_snip,
-        ae_loc,
-        ae_sess,
-        ae_api,
-        ae_trig,
-        slct,
-        slct_trigger
-    } from '$lib/stores/ae_stores';
-    // import Element_data_store from '$lib/elements/element_data_store.svelte';
-
-    interface Props {
-        /** @type {import('./$types').LayoutData} */
-        data: any;
-        children?: import('svelte').Snippet;
-    }
-
-    let { data, children }: Props = $props();
+let { data, children }: Props = $props();
 </script>
 
 <svelte:head>
@@ -40,11 +40,10 @@
     class:iframe={$ae_loc?.iframe}
     class="
         ae_hosted_files
-        h-full max-h-full max-w-6xl overflow-auto
-        flex flex-col gap-1
-        m-auto
-        "
->
+        m-auto flex h-full max-h-full
+        max-w-6xl flex-col gap-1
+        overflow-auto
+        ">
     <nav
         class="
         submenu
@@ -55,8 +54,7 @@
         p-1
         px-2
         pb-2
-        "
-    >
+        ">
         <span class="justify-self-start">
             <!-- Be sure to explain what &AElig; (Aether) means in the title text or similar! -->
             <Satellite size="1.5em" class="mx-1 inline-block text-gray-500" />
@@ -68,14 +66,15 @@
         /> -->
         <a
             href="/"
-            class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-success-500"
-        >
+            class="btn btn-sm preset-tonal-surface border-surface-500 hover:preset-filled-success-500 border">
             <House />
             <span class="hidden md:inline"> Home </span>
         </a>
     </nav>
 
-    <section class:iframe={$ae_loc?.iframe} class="main_content grow px-1 md:px-2 pb-28">
+    <section
+        class:iframe={$ae_loc?.iframe}
+        class="main_content grow px-1 pb-28 md:px-2">
         {@render children?.()}
     </section>
 </div>
diff --git a/src/routes/hosted_files/+layout.ts b/src/routes/hosted_files/+layout.ts
index 28753a0e..1d18c3d6 100644
--- a/src/routes/hosted_files/+layout.ts
+++ b/src/routes/hosted_files/+layout.ts
@@ -27,7 +27,9 @@ export async function load({ params, parent, url }) {
 
     const qry_limit = parseInt(url.searchParams.get('limit') ?? '19');
     if (!qry_limit) {
-        console.log(`qry_limit +page.ts: The qry_limit was not found in the params!!!`);
+        console.log(
+            `qry_limit +page.ts: The qry_limit was not found in the params!!!`
+        );
     }
     ae_acct.slct.qry_limit = qry_limit;
 
diff --git a/src/routes/hosted_files/+page.svelte b/src/routes/hosted_files/+page.svelte
index ad2d522d..e20756ae 100644
--- a/src/routes/hosted_files/+page.svelte
+++ b/src/routes/hosted_files/+page.svelte
@@ -1,90 +1,96 @@
 <script lang="ts">
-    // console.log(`ae_ Svelte Hosted Files +page data:`, data);
+// console.log(`ae_ Svelte Hosted Files +page data:`, data);
 
-    import { onMount } from 'svelte';
+import { onMount } from 'svelte';
 
-    // import { api } from '$lib/api.js';
-    import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
-    // import { ae_util } from '$lib/ae_utils/ae_utils';
-    import type { key_val } from '$lib/stores/ae_stores';
+// import { api } from '$lib/api.js';
+import {
+    ae_loc,
+    ae_sess,
+    ae_api,
+    slct,
+    slct_trigger
+} from '$lib/stores/ae_stores';
+// import { ae_util } from '$lib/ae_utils/ae_utils';
+import type { key_val } from '$lib/stores/ae_stores';
 
-    import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
-    import { Video } from '@lucide/svelte';
-    let { data } = $props();
+import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
+import { Video } from '@lucide/svelte';
+let { data } = $props();
 
-    let log_lvl = 0;
+let log_lvl = 0;
 
-    let ae_promises: key_val = {};
+let ae_promises: key_val = {};
 
-    // export let container_class_li = [];
+// export let container_class_li = [];
 
-    let file_uploads_post_promise;
-    let download_src;
-    let download_filename;
+let file_uploads_post_promise;
+let download_src;
+let download_filename;
 
-    if (!$ae_loc.files) {
-        $ae_loc.files = {};
-        $ae_loc.files.processed_file_kv = {};
-        $ae_loc.files.uploaded_file_kv = {};
-        $ae_loc.files.video_clip_file_kv = {};
-        // $ae_loc.files.uploaded_file_list = [];
-        // $ae_loc.files.video_clip_file_list = [];
-    }
-    if (!$ae_loc.files.processed_file_kv) {
-        $ae_loc.files.processed_file_kv = {};
+if (!$ae_loc.files) {
+    $ae_loc.files = {};
+    $ae_loc.files.processed_file_kv = {};
+    $ae_loc.files.uploaded_file_kv = {};
+    $ae_loc.files.video_clip_file_kv = {};
+    // $ae_loc.files.uploaded_file_list = [];
+    // $ae_loc.files.video_clip_file_list = [];
+}
+if (!$ae_loc.files.processed_file_kv) {
+    $ae_loc.files.processed_file_kv = {};
+}
+
+$effect(() => {
+    // if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_li) {
+    // // Append this list to the $ae_loc.files.uploaded_file_li list
+    // $ae_loc.files.uploaded_file_li = [
+    //     ...$ae_loc.files.uploaded_file_li,
+    //     ...$ae_sess.files.uploaded_file_li
+    // ];
+    // }
+
+    if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_kv) {
+        // Add this key-value pair to the $ae_loc.files.uploaded_file_kv object
+        $ae_loc.files.uploaded_file_kv = {
+            ...$ae_loc.files.uploaded_file_kv,
+            ...$ae_sess.files.uploaded_file_kv
+        };
+        $ae_sess.files.upload_complete = false;
     }
 
-    $effect(() => {
-        // if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_li) {
-        // // Append this list to the $ae_loc.files.uploaded_file_li list
-        // $ae_loc.files.uploaded_file_li = [
-        //     ...$ae_loc.files.uploaded_file_li,
-        //     ...$ae_sess.files.uploaded_file_li
-        // ];
-        // }
+    if ($ae_sess.files.clip_complete && $ae_sess.files.video_clip_file_kv) {
+        // Add this key-value pair to the $ae_loc.files.video_clip_file_kv object
+        $ae_loc.files.video_clip_file_kv = {
+            ...$ae_loc.files.video_clip_file_kv,
+            ...$ae_sess.files.video_clip_file_kv
+        };
+        $ae_sess.files.clip_complete = false;
+    }
+});
 
-        if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_kv) {
-            // Add this key-value pair to the $ae_loc.files.uploaded_file_kv object
-            $ae_loc.files.uploaded_file_kv = {
-                ...$ae_loc.files.uploaded_file_kv,
-                ...$ae_sess.files.uploaded_file_kv
-            };
-            $ae_sess.files.upload_complete = false;
-        }
+// $effect(() => {
+//     if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_kv) {
+//     // Add this key-value pair to the $ae_loc.files.uploaded_file_kv object
+//     $ae_loc.files.uploaded_file_kv = {
+//         ...$ae_loc.files.uploaded_file_kv,
+//         ...$ae_sess.files.uploaded_file_kv
+//     };
+//     }
+// });
 
-        if ($ae_sess.files.clip_complete && $ae_sess.files.video_clip_file_kv) {
-            // Add this key-value pair to the $ae_loc.files.video_clip_file_kv object
-            $ae_loc.files.video_clip_file_kv = {
-                ...$ae_loc.files.video_clip_file_kv,
-                ...$ae_sess.files.video_clip_file_kv
-            };
-            $ae_sess.files.clip_complete = false;
-        }
-    });
+// $effect(() => {
+//     if ($ae_sess.files.clip_complete && $ae_sess.files.video_clip_file_kv) {
+//     // Add this key-value pair to the $ae_loc.files.video_clip_file_kv object
+//     $ae_loc.files.video_clip_file_kv = {
+//         ...$ae_loc.files.video_clip_file_kv,
+//         ...$ae_sess.files.video_clip_file_kv
+//     };
+//     }
+// });
 
-    // $effect(() => {
-    //     if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_kv) {
-    //     // Add this key-value pair to the $ae_loc.files.uploaded_file_kv object
-    //     $ae_loc.files.uploaded_file_kv = {
-    //         ...$ae_loc.files.uploaded_file_kv,
-    //         ...$ae_sess.files.uploaded_file_kv
-    //     };
-    //     }
-    // });
-
-    // $effect(() => {
-    //     if ($ae_sess.files.clip_complete && $ae_sess.files.video_clip_file_kv) {
-    //     // Add this key-value pair to the $ae_loc.files.video_clip_file_kv object
-    //     $ae_loc.files.video_clip_file_kv = {
-    //         ...$ae_loc.files.video_clip_file_kv,
-    //         ...$ae_sess.files.video_clip_file_kv
-    //     };
-    //     }
-    // });
-
-    onMount(() => {
-        console.log('Hosted Files: AV Utilities +page.svelte');
-    });
+onMount(() => {
+    console.log('Hosted Files: AV Utilities +page.svelte');
+});
 </script>
 
 <!-- <section
@@ -123,8 +129,7 @@
     link_to_id={$ae_loc?.account_id}
     allow_basic={true}
     allow_moderator={true}
-    class_li={'max-h-full'}
-/>
+    class_li={'max-h-full'} />
 
 <!-- </div> -->
 
diff --git a/src/routes/hosted_files/video_util/+page.svelte b/src/routes/hosted_files/video_util/+page.svelte
index 5b33e04a..ce21fc72 100644
--- a/src/routes/hosted_files/video_util/+page.svelte
+++ b/src/routes/hosted_files/video_util/+page.svelte
@@ -1,123 +1,129 @@
 <script lang="ts">
-    import { run } from 'svelte/legacy';
+import { run } from 'svelte/legacy';
 
-    // console.log(`ae_ Svelte Hosted Files +page data:`, data);
+// console.log(`ae_ Svelte Hosted Files +page data:`, data);
 
-    import { onMount } from 'svelte';
+import { onMount } from 'svelte';
 
-    // import { api } from '$lib/api.js';
-    import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
-    // import { ae_util } from '$lib/ae_utils/ae_utils';
-    import type { key_val } from '$lib/stores/ae_stores';
+// import { api } from '$lib/api.js';
+import {
+    ae_loc,
+    ae_sess,
+    ae_api,
+    slct,
+    slct_trigger
+} from '$lib/stores/ae_stores';
+// import { ae_util } from '$lib/ae_utils/ae_utils';
+import type { key_val } from '$lib/stores/ae_stores';
 
-    import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte';
-    import Comp_hosted_files_clip_video from '$lib/ae_core/ae_comp__hosted_files_clip_video.svelte';
-    import Comp_hosted_files_clip_video_li from '$lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte';
+import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte';
+import Comp_hosted_files_clip_video from '$lib/ae_core/ae_comp__hosted_files_clip_video.svelte';
+import Comp_hosted_files_clip_video_li from '$lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte';
 
-    import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
-    import { ArrowLeftRight, Trash2, Upload } from '@lucide/svelte';
-    let { data } = $props();
+import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
+import { ArrowLeftRight, Trash2, Upload } from '@lucide/svelte';
+let { data } = $props();
 
-    let log_lvl = 1;
+let log_lvl = 1;
 
-    let ae_promises: key_val = {};
+let ae_promises: key_val = {};
 
-    // export let container_class_li = [];
+// export let container_class_li = [];
 
-    let file_uploads_post_promise;
-    let download_src;
-    let download_filename;
+let file_uploads_post_promise;
+let download_src;
+let download_filename;
 
-    let file_uploads_clip_post_promise;
-    let download_clip_src;
-    let download_clip_filename;
+let file_uploads_clip_post_promise;
+let download_clip_src;
+let download_clip_filename;
 
-    let hosted_file_upload: key_val = $state({
-        // link_to_type: 'account',
-        // link_to_id: ae_loc.account_id,
-        hosted_file_id_li: [],
-        hosted_file_obj_li: [],
-        clip_complete: false,
-        upload_complete: false,
-        submit_status: null
-    });
+let hosted_file_upload: key_val = $state({
+    // link_to_type: 'account',
+    // link_to_id: ae_loc.account_id,
+    hosted_file_id_li: [],
+    hosted_file_obj_li: [],
+    clip_complete: false,
+    upload_complete: false,
+    submit_status: null
+});
 
-    let hosted_file_clip: key_val = $state({
-        video_clip_file_kv: {},
-        clip_complete: false,
-        submit_status: null
-    });
+let hosted_file_clip: key_val = $state({
+    video_clip_file_kv: {},
+    clip_complete: false,
+    submit_status: null
+});
 
-    if (!$ae_loc.files) {
-        $ae_loc.files = {};
-        $ae_loc.files.processed_file_kv = {};
-        $ae_loc.files.uploaded_file_kv = {};
-        $ae_loc.files.video_clip_file_kv = {};
-        // $ae_loc.files.uploaded_file_list = [];
-        // $ae_loc.files.video_clip_file_list = [];
-    }
-    if (!$ae_loc.files.processed_file_kv) {
-        $ae_loc.files.processed_file_kv = {};
-    }
+if (!$ae_loc.files) {
+    $ae_loc.files = {};
+    $ae_loc.files.processed_file_kv = {};
+    $ae_loc.files.uploaded_file_kv = {};
+    $ae_loc.files.video_clip_file_kv = {};
+    // $ae_loc.files.uploaded_file_list = [];
+    // $ae_loc.files.video_clip_file_list = [];
+}
+if (!$ae_loc.files.processed_file_kv) {
+    $ae_loc.files.processed_file_kv = {};
+}
 
-    if (!$ae_sess.files) {
-        $ae_sess.files = {};
-    }
-    if (typeof $ae_sess.files.upload_complete === 'undefined') {
+if (!$ae_sess.files) {
+    $ae_sess.files = {};
+}
+if (typeof $ae_sess.files.upload_complete === 'undefined') {
+    $ae_sess.files.upload_complete = false;
+}
+
+$effect(() => {
+    // if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_li) {
+    // // Append this list to the $ae_loc.files.uploaded_file_li list
+    // $ae_loc.files.uploaded_file_li = [
+    //     ...$ae_loc.files.uploaded_file_li,
+    //     ...$ae_sess.files.uploaded_file_li
+    // ];
+    // }
+
+    if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_kv) {
+        // Add this key-value pair to the $ae_loc.files.uploaded_file_kv object
+        $ae_loc.files.uploaded_file_kv = {
+            ...$ae_loc.files.uploaded_file_kv,
+            ...$ae_sess.files.uploaded_file_kv
+        };
         $ae_sess.files.upload_complete = false;
     }
 
-    $effect(() => {
-        // if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_li) {
-        // // Append this list to the $ae_loc.files.uploaded_file_li list
-        // $ae_loc.files.uploaded_file_li = [
-        //     ...$ae_loc.files.uploaded_file_li,
-        //     ...$ae_sess.files.uploaded_file_li
-        // ];
-        // }
+    if ($ae_sess.files.clip_complete && $ae_sess.files.video_clip_file_kv) {
+        // Add this key-value pair to the $ae_loc.files.video_clip_file_kv object
+        $ae_loc.files.video_clip_file_kv = {
+            ...$ae_loc.files.video_clip_file_kv,
+            ...$ae_sess.files.video_clip_file_kv
+        };
+        $ae_sess.files.clip_complete = false;
+    }
+});
 
-        if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_kv) {
-            // Add this key-value pair to the $ae_loc.files.uploaded_file_kv object
-            $ae_loc.files.uploaded_file_kv = {
-                ...$ae_loc.files.uploaded_file_kv,
-                ...$ae_sess.files.uploaded_file_kv
-            };
-            $ae_sess.files.upload_complete = false;
-        }
+// $effect(() => {
+//     if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_kv) {
+//     // Add this key-value pair to the $ae_loc.files.uploaded_file_kv object
+//     $ae_loc.files.uploaded_file_kv = {
+//         ...$ae_loc.files.uploaded_file_kv,
+//         ...$ae_sess.files.uploaded_file_kv
+//     };
+//     }
+// });
 
-        if ($ae_sess.files.clip_complete && $ae_sess.files.video_clip_file_kv) {
-            // Add this key-value pair to the $ae_loc.files.video_clip_file_kv object
-            $ae_loc.files.video_clip_file_kv = {
-                ...$ae_loc.files.video_clip_file_kv,
-                ...$ae_sess.files.video_clip_file_kv
-            };
-            $ae_sess.files.clip_complete = false;
-        }
-    });
+// $effect(() => {
+//     if ($ae_sess.files.clip_complete && $ae_sess.files.video_clip_file_kv) {
+//     // Add this key-value pair to the $ae_loc.files.video_clip_file_kv object
+//     $ae_loc.files.video_clip_file_kv = {
+//         ...$ae_loc.files.video_clip_file_kv,
+//         ...$ae_sess.files.video_clip_file_kv
+//     };
+//     }
+// });
 
-    // $effect(() => {
-    //     if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_kv) {
-    //     // Add this key-value pair to the $ae_loc.files.uploaded_file_kv object
-    //     $ae_loc.files.uploaded_file_kv = {
-    //         ...$ae_loc.files.uploaded_file_kv,
-    //         ...$ae_sess.files.uploaded_file_kv
-    //     };
-    //     }
-    // });
-
-    // $effect(() => {
-    //     if ($ae_sess.files.clip_complete && $ae_sess.files.video_clip_file_kv) {
-    //     // Add this key-value pair to the $ae_loc.files.video_clip_file_kv object
-    //     $ae_loc.files.video_clip_file_kv = {
-    //         ...$ae_loc.files.video_clip_file_kv,
-    //         ...$ae_sess.files.video_clip_file_kv
-    //     };
-    //     }
-    // });
-
-    onMount(() => {
-        console.log('Hosted Files: AV Utilities +page.svelte');
-    });
+onMount(() => {
+    console.log('Hosted Files: AV Utilities +page.svelte');
+});
 </script>
 
 <!-- <section
@@ -140,10 +146,11 @@
 
 <h1 class="h1">Clip and Scale Video Files</h1>
 <p>
-    This AV utility will take an mp4 video file and create a clipped mp4 video file. By default,
-    videos will be scaled down to 1920x1080. This process takes at least 30 seconds, but it can
-    easily take a handful of minutes. The scaling option requires that the video be re-encoded.
-    Please be patient while it is processing.
+    This AV utility will take an mp4 video file and create a clipped mp4 video
+    file. By default, videos will be scaled down to 1920x1080. This process
+    takes at least 30 seconds, but it can easily take a handful of minutes. The
+    scaling option requires that the video be re-encoded. Please be patient
+    while it is processing.
 </p>
 
 <h2 class="h2">
@@ -151,7 +158,7 @@
 
     <button
         type="button"
-        class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 float-right"
+        class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 float-right border"
         title="Toggle between Upload and Select from Hosted Files"
         onclick={() => {
             if ($ae_sess.files.add_to_use_files_method == 'upload') {
@@ -159,8 +166,7 @@
             } else {
                 $ae_sess.files.add_to_use_files_method = 'upload';
             }
-        }}
-    >
+        }}>
         <ArrowLeftRight size="1em" class="m-1" />
         Upload/Select
     </button>
@@ -175,15 +181,15 @@
         bind:hosted_file_obj_li={hosted_file_upload.hosted_file_obj_li}
         bind:hosted_file_obj_kv={$ae_sess.files.uploaded_file_kv}
         bind:upload_complete={$ae_sess.files.upload_complete}
-        {log_lvl}
-    >
+        {log_lvl}>
         {#snippet label()}
             <span>
-                <div class="flex items-center gap-2 mb-1">
+                <div class="mb-1 flex items-center gap-2">
                     <Upload size="1em" class="text-primary-500" />
-                    <strong class="preset-tonal-success px-3 py-1 rounded-full">Upload video files</strong>
+                    <strong class="preset-tonal-success rounded-full px-3 py-1"
+                        >Upload video files</strong>
                 </div>
-                <span class="text-sm opacity-70 italic">
+                <span class="text-sm italic opacity-70">
                     <strong>Aether hosted files only</strong><br />
                     Recommended: video (mp4, mkv)<br />
                 </span>
@@ -200,8 +206,7 @@
         allow_moderator={true}
         class_li={''}
         max_file_count={39}
-        file_type={'video'}
-    />
+        file_type={'video'} />
 </div>
 
 <hr />
@@ -214,8 +219,7 @@
         onclick={() => {
             $ae_loc.files.uploaded_file_kv = {};
         }}
-        class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 float-right"
-    >
+        class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 float-right border">
         <Trash2 size="1em" class="m-1" />
         Clear Upload History
     </button>
@@ -229,8 +233,7 @@
         bind:video_clip_file_kv={$ae_loc.files.video_clip_file_kv}
         bind:clip_complete={$ae_sess.files.clip_complete}
         bind:submit_status={hosted_file_clip.submit_status}
-        {log_lvl}
-    ></Comp_hosted_files_clip_video>
+        {log_lvl}></Comp_hosted_files_clip_video>
 {:else}
     <p>Upload a video file to clip first.</p>
 {/if}
@@ -245,8 +248,7 @@
         onclick={() => {
             $ae_loc.files.video_clip_file_kv = {};
         }}
-        class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 float-right"
-    >
+        class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 float-right border">
         <Trash2 size="1em" class="m-1" />
         Clear Clip History
     </button>
@@ -257,8 +259,7 @@
         link_to_type="account"
         link_to_id={$ae_loc.account_id}
         bind:video_clip_file_kv={$ae_loc.files.video_clip_file_kv}
-        {log_lvl}
-    ></Comp_hosted_files_clip_video_li>
+        {log_lvl}></Comp_hosted_files_clip_video_li>
 {:else}
     <p>Clip a video file first.</p>
 {/if}
diff --git a/src/routes/hosted_files/video_util/hold_video_util.svelte b/src/routes/hosted_files/video_util/hold_video_util.svelte
index 9b94d06a..4aeef110 100644
--- a/src/routes/hosted_files/video_util/hold_video_util.svelte
+++ b/src/routes/hosted_files/video_util/hold_video_util.svelte
@@ -1,54 +1,61 @@
 <script lang="ts">
-    // import { api } from '$lib/api.js';
-    import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
-    // import { ae_util } from '$lib/ae_utils/ae_utils';
-    import type { key_val } from '$lib/stores/ae_stores';
+// import { api } from '$lib/api.js';
+import {
+    ae_loc,
+    ae_sess,
+    ae_api,
+    slct,
+    slct_trigger
+} from '$lib/stores/ae_stores';
+// import { ae_util } from '$lib/ae_utils/ae_utils';
+import type { key_val } from '$lib/stores/ae_stores';
 
-    import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte';
-    import Comp_hosted_files_clip_video from '$lib/ae_core/ae_comp__hosted_files_clip_video.svelte';
-    import Comp_hosted_files_clip_video_li from '$lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte';
+import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte';
+import Comp_hosted_files_clip_video from '$lib/ae_core/ae_comp__hosted_files_clip_video.svelte';
+import Comp_hosted_files_clip_video_li from '$lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte';
 
-    import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
-    import { ArrowLeftRight, Trash2, Upload } from '@lucide/svelte';
-    let log_lvl = 1;
+import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
+import { ArrowLeftRight, Trash2, Upload } from '@lucide/svelte';
+let log_lvl = 1;
 
-    let ae_promises: key_val = {};
+let ae_promises: key_val = {};
 
-    // export let container_class_li = [];
+// export let container_class_li = [];
 
-    let file_uploads_post_promise;
-    let download_src;
-    let download_filename;
+let file_uploads_post_promise;
+let download_src;
+let download_filename;
 
-    let file_uploads_clip_post_promise;
-    let download_clip_src;
-    let download_clip_filename;
+let file_uploads_clip_post_promise;
+let download_clip_src;
+let download_clip_filename;
 
-    let hosted_file_upload: key_val = $state({
-        // link_to_type: 'account',
-        // link_to_id: ae_loc.account_id,
-        hosted_file_id_li: [],
-        hosted_file_obj_li: [],
-        clip_complete: false,
-        upload_complete: false,
-        submit_status: null
-    });
+let hosted_file_upload: key_val = $state({
+    // link_to_type: 'account',
+    // link_to_id: ae_loc.account_id,
+    hosted_file_id_li: [],
+    hosted_file_obj_li: [],
+    clip_complete: false,
+    upload_complete: false,
+    submit_status: null
+});
 
-    let hosted_file_clip: key_val = $state({
-        video_clip_file_kv: {},
-        clip_complete: false,
-        submit_status: null
-    });
+let hosted_file_clip: key_val = $state({
+    video_clip_file_kv: {},
+    clip_complete: false,
+    submit_status: null
+});
 </script>
 
 <section class="ae__hosted_files__av_util container space-y-4 pb-20">
-    <div class="border border-gray-200 p-2 rounded-lg">
+    <div class="rounded-lg border border-gray-200 p-2">
         <h1 class="h1">Clip and Scale Video Files</h1>
         <p>
-            This AV utility will take an mp4 video file and create a clipped mp4 video file. By
-            default, videos will be scaled down to 1920x1080. This process takes at least 30
-            seconds, but it can easily take a handful of minutes. The scaling option requires that
-            the video be re-encoded. Please be patient while it is processing.
+            This AV utility will take an mp4 video file and create a clipped mp4
+            video file. By default, videos will be scaled down to 1920x1080.
+            This process takes at least 30 seconds, but it can easily take a
+            handful of minutes. The scaling option requires that the video be
+            re-encoded. Please be patient while it is processing.
         </p>
 
         <h2 class="h2">
@@ -56,7 +63,7 @@
 
             <button
                 type="button"
-                class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 float-right"
+                class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 float-right border"
                 title="Toggle between Upload and Select from Hosted Files"
                 onclick={() => {
                     if ($ae_sess.files.add_to_use_files_method == 'upload') {
@@ -64,8 +71,7 @@
                     } else {
                         $ae_sess.files.add_to_use_files_method = 'upload';
                     }
-                }}
-            >
+                }}>
                 <ArrowLeftRight size="1em" class="m-1" />
                 Upload/Select
             </button>
@@ -80,15 +86,16 @@
                 bind:hosted_file_obj_li={hosted_file_upload.hosted_file_obj_li}
                 bind:hosted_file_obj_kv={$ae_sess.files.uploaded_file_kv}
                 bind:upload_complete={$ae_sess.files.upload_complete}
-                {log_lvl}
-            >
+                {log_lvl}>
                 {#snippet label()}
                     <span>
                         <div>
                             <Upload size="1em" />
-                            <strong class="bg-green-100 p-1">Upload video files</strong>
+                            <strong class="bg-green-100 p-1"
+                                >Upload video files</strong>
                         </div>
-                        <span class="text-sm text-gray-600 dark:text-gray-400 italic">
+                        <span
+                            class="text-sm text-gray-600 italic dark:text-gray-400">
                             <strong>Aether hosted files only</strong><br />
                             Recommended: video (mp4, mkv)<br />
                         </span>
@@ -97,14 +104,15 @@
             </Comp_hosted_files_upload>
         </div>
 
-        <div class:hidden={$ae_sess.files.add_to_use_files_method == 'select'} class="">
+        <div
+            class:hidden={$ae_sess.files.add_to_use_files_method == 'select'}
+            class="">
             <Element_manage_hosted_file_li_wrap
                 link_to_type={'account'}
                 link_to_id={$ae_loc?.account_id}
                 allow_basic={true}
                 allow_moderator={true}
-                class_li={''}
-            />
+                class_li={''} />
         </div>
 
         <hr />
@@ -117,8 +125,7 @@
                 onclick={() => {
                     $ae_loc.files.uploaded_file_kv = {};
                 }}
-                class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 float-right"
-            >
+                class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 float-right border">
                 <Trash2 size="1em" class="m-1" />
                 Clear Upload History
             </button>
@@ -132,8 +139,7 @@
                 bind:video_clip_file_kv={$ae_loc.files.video_clip_file_kv}
                 bind:clip_complete={$ae_sess.files.clip_complete}
                 bind:submit_status={hosted_file_clip.submit_status}
-                {log_lvl}
-            ></Comp_hosted_files_clip_video>
+                {log_lvl}></Comp_hosted_files_clip_video>
         {:else}
             <p>Upload a video file to clip first.</p>
         {/if}
@@ -146,8 +152,7 @@
                 onclick={() => {
                     $ae_loc.files.video_clip_file_kv = {};
                 }}
-                class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 float-right"
-            >
+                class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 float-right border">
                 <Trash2 size="1em" class="m-1" />
                 Clear Clip History
             </button>
@@ -158,8 +163,7 @@
                 link_to_type="account"
                 link_to_id={$ae_loc.account_id}
                 bind:video_clip_file_kv={$ae_loc.files.video_clip_file_kv}
-                {log_lvl}
-            ></Comp_hosted_files_clip_video_li>
+                {log_lvl}></Comp_hosted_files_clip_video_li>
         {:else}
             <p>Clip a video file first.</p>
         {/if}
diff --git a/src/routes/manifest.webmanifest/+server.ts b/src/routes/manifest.webmanifest/+server.ts
index 539528cf..6c2e0b8e 100644
--- a/src/routes/manifest.webmanifest/+server.ts
+++ b/src/routes/manifest.webmanifest/+server.ts
@@ -50,64 +50,131 @@ export const GET: RequestHandler = async ({ url, fetch }) => {
     }
 
     // Default branding
-    const branding_name = site_domain?.account_name || site_domain?.name || "Aether";
+    const branding_name =
+        site_domain?.account_name || site_domain?.name || 'Aether';
     const name = `One Sky IT - ${branding_name} Aether PWA`;
     const short_name = `${site_domain?.account_code || site_domain?.code || 'Aether'} PWA`;
-    const background_color = site_domain?.cfg_json?.pwa_background_color || "hsl(220, 65%, 31%)";
-    const theme_color = "#3a5997";
+    const background_color =
+        site_domain?.cfg_json?.pwa_background_color || 'hsl(220, 65%, 31%)';
+    const theme_color = '#3a5997';
 
     const manifest = {
-        "id": `ae-pwa-${fqdn}`, // Unique ID for this installation
-        "name": name,
-        "short_name": short_name,
-        "description": `The ${name} platform for unified event and documentation management.`,
-        "start_url": "/",
-        "scope": "/",
-        "display": "fullscreen",
-        "background_color": background_color,
-        "theme_color": theme_color,
-        "orientation": "any",
-        "categories": ["business", "productivity", "utilities"],
-        "icons": [
+        id: `ae-pwa-${fqdn}`, // Unique ID for this installation
+        name: name,
+        short_name: short_name,
+        description: `The ${name} platform for unified event and documentation management.`,
+        start_url: '/',
+        scope: '/',
+        display: 'fullscreen',
+        background_color: background_color,
+        theme_color: theme_color,
+        orientation: 'any',
+        categories: ['business', 'productivity', 'utilities'],
+        icons: [
             // Standard Icons (Small/Med)
-            { "sizes": "24x24", "src": "https://static.oneskyit.com/images/OSIT_logo_2022_24px.png", "type": "image/png" },
-            { "sizes": "48x48", "src": "https://static.oneskyit.com/images/OSIT_logo_2022_48px.png", "type": "image/png" },
-            { "sizes": "96x96", "src": "https://static.oneskyit.com/images/OSIT_logo_2022_96px.png", "type": "image/png" },
-            { "sizes": "144x144", "src": "https://static.oneskyit.com/images/OSIT_logo_2022_144px.png", "type": "image/png" },
-            { "sizes": "180x180", "src": "https://static.oneskyit.com/images/OSIT_logo_2022_180px.png", "type": "image/png" },
+            {
+                sizes: '24x24',
+                src: 'https://static.oneskyit.com/images/OSIT_logo_2022_24px.png',
+                type: 'image/png'
+            },
+            {
+                sizes: '48x48',
+                src: 'https://static.oneskyit.com/images/OSIT_logo_2022_48px.png',
+                type: 'image/png'
+            },
+            {
+                sizes: '96x96',
+                src: 'https://static.oneskyit.com/images/OSIT_logo_2022_96px.png',
+                type: 'image/png'
+            },
+            {
+                sizes: '144x144',
+                src: 'https://static.oneskyit.com/images/OSIT_logo_2022_144px.png',
+                type: 'image/png'
+            },
+            {
+                sizes: '180x180',
+                src: 'https://static.oneskyit.com/images/OSIT_logo_2022_180px.png',
+                type: 'image/png'
+            },
             // High-res Maskable Icons (WebP preferred for efficiency)
-            { "sizes": "192x192", "src": "https://static.oneskyit.com/images/OSIT_logo_2022_192px.webp", "type": "image/webp", "purpose": "any maskable" },
-            { "sizes": "192x192", "src": "https://static.oneskyit.com/images/OSIT_logo_2022_192px.png", "type": "image/png", "purpose": "any maskable" },
-            { "sizes": "512x512", "src": "https://static.oneskyit.com/images/OSIT_logo_2022_512px.webp", "type": "image/webp", "purpose": "any maskable" },
-            { "sizes": "512x512", "src": "https://static.oneskyit.com/images/OSIT_logo_2022_512px.png", "type": "image/png", "purpose": "any maskable" },
-            { "sizes": "1024x1024", "src": "https://static.oneskyit.com/images/OSIT_logo_2022_1024px.webp", "type": "image/webp", "purpose": "any maskable" },
-            { "sizes": "1024x1024", "src": "https://static.oneskyit.com/images/OSIT_logo_2022_1024px.png", "type": "image/png", "purpose": "any maskable" }
-        ],
-        // App Shortcuts (Long-press icon features)
-        "shortcuts": [
             {
-                "name": "Journals",
-                "short_name": "Journals",
-                "description": "View and manage journal entries",
-                "url": "/journals",
-                "icons": [{ "src": "https://static.oneskyit.com/images/OSIT_logo_2022_192px.png", "sizes": "192x192" }]
+                sizes: '192x192',
+                src: 'https://static.oneskyit.com/images/OSIT_logo_2022_192px.webp',
+                type: 'image/webp',
+                purpose: 'any maskable'
             },
             {
-                "name": "Events",
-                "short_name": "Events",
-                "description": "Access active event management",
-                "url": "/events",
-                "icons": [{ "src": "https://static.oneskyit.com/images/OSIT_logo_2022_192px.png", "sizes": "192x192" }]
+                sizes: '192x192',
+                src: 'https://static.oneskyit.com/images/OSIT_logo_2022_192px.png',
+                type: 'image/png',
+                purpose: 'any maskable'
             },
             {
-                "name": "Testing",
-                "short_name": "Testing",
-                "description": "System diagnostic dashboard",
-                "url": "/testing",
-                "icons": [{ "src": "https://static.oneskyit.com/images/OSIT_logo_2022_192px.png", "sizes": "192x192" }]
+                sizes: '512x512',
+                src: 'https://static.oneskyit.com/images/OSIT_logo_2022_512px.webp',
+                type: 'image/webp',
+                purpose: 'any maskable'
+            },
+            {
+                sizes: '512x512',
+                src: 'https://static.oneskyit.com/images/OSIT_logo_2022_512px.png',
+                type: 'image/png',
+                purpose: 'any maskable'
+            },
+            {
+                sizes: '1024x1024',
+                src: 'https://static.oneskyit.com/images/OSIT_logo_2022_1024px.webp',
+                type: 'image/webp',
+                purpose: 'any maskable'
+            },
+            {
+                sizes: '1024x1024',
+                src: 'https://static.oneskyit.com/images/OSIT_logo_2022_1024px.png',
+                type: 'image/png',
+                purpose: 'any maskable'
             }
         ],
-        "testing": "One Sky IT"
+        // App Shortcuts (Long-press icon features)
+        shortcuts: [
+            {
+                name: 'Journals',
+                short_name: 'Journals',
+                description: 'View and manage journal entries',
+                url: '/journals',
+                icons: [
+                    {
+                        src: 'https://static.oneskyit.com/images/OSIT_logo_2022_192px.png',
+                        sizes: '192x192'
+                    }
+                ]
+            },
+            {
+                name: 'Events',
+                short_name: 'Events',
+                description: 'Access active event management',
+                url: '/events',
+                icons: [
+                    {
+                        src: 'https://static.oneskyit.com/images/OSIT_logo_2022_192px.png',
+                        sizes: '192x192'
+                    }
+                ]
+            },
+            {
+                name: 'Testing',
+                short_name: 'Testing',
+                description: 'System diagnostic dashboard',
+                url: '/testing',
+                icons: [
+                    {
+                        src: 'https://static.oneskyit.com/images/OSIT_logo_2022_192px.png',
+                        sizes: '192x192'
+                    }
+                ]
+            }
+        ],
+        testing: 'One Sky IT'
     };
 
     return json(manifest, {
@@ -116,4 +183,4 @@ export const GET: RequestHandler = async ({ url, fetch }) => {
             'Cache-Control': 'public, max-age=3600'
         }
     });
-};
\ No newline at end of file
+};
diff --git a/src/routes/testing/+page.svelte b/src/routes/testing/+page.svelte
index 6f491f9e..13094cd1 100644
--- a/src/routes/testing/+page.svelte
+++ b/src/routes/testing/+page.svelte
@@ -1,130 +1,180 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { PUBLIC_AE_BOOTSTRAP_KEY } from '$env/static/public';
+import { onMount } from 'svelte';
+import { PUBLIC_AE_BOOTSTRAP_KEY } from '$env/static/public';
 
-    // import { api } from '$lib/api/api';
-    import { ae_loc, ae_api, ae_sess } from '$lib/stores/ae_stores';
-    // import { get_object } from '$lib/ae_api/api_get_object';
-    import { post_object } from '$lib/ae_api/api_post_object';
-    import { patch_object } from '$lib/ae_api/api_patch_object';
-    import { ArrowRightLeft, Bug, Building2, CircleCheck, Code, Contact, Database, Eye, EyeOff, FlaskConical, Globe, Info, Key, MapPin, RefreshCcw, Satellite, Server, Settings2, ShieldAlert, ShieldCheck, Trash2, Unlock, User, UserCheck, Users, Zap } from '@lucide/svelte';
-    // Core Module Imports
-    import { load_ae_obj_li__account } from '$lib/ae_core/ae_core__account';
-    import { lookup_site_domain } from '$lib/ae_core/ae_core__site';
-    import { load_ae_obj_id__user } from '$lib/ae_core/ae_core__user';
-    import { db_core } from '$lib/ae_core/db_core';
-    import { events_loc } from '$lib/stores/ae_events_stores';
+// import { api } from '$lib/api/api';
+import { ae_loc, ae_api, ae_sess } from '$lib/stores/ae_stores';
+// import { get_object } from '$lib/ae_api/api_get_object';
+import { post_object } from '$lib/ae_api/api_post_object';
+import { patch_object } from '$lib/ae_api/api_patch_object';
+import {
+    ArrowRightLeft,
+    Bug,
+    Building2,
+    CircleCheck,
+    Code,
+    Contact,
+    Database,
+    Eye,
+    EyeOff,
+    FlaskConical,
+    Globe,
+    Info,
+    Key,
+    MapPin,
+    RefreshCcw,
+    Satellite,
+    Server,
+    Settings2,
+    ShieldAlert,
+    ShieldCheck,
+    Trash2,
+    Unlock,
+    User,
+    UserCheck,
+    Users,
+    Zap
+} from '@lucide/svelte';
+// Core Module Imports
+import { load_ae_obj_li__account } from '$lib/ae_core/ae_core__account';
+import { lookup_site_domain } from '$lib/ae_core/ae_core__site';
+import { load_ae_obj_id__user } from '$lib/ae_core/ae_core__user';
+import { db_core } from '$lib/ae_core/db_core';
+import { events_loc } from '$lib/stores/ae_events_stores';
 
-    // State Variables
-    let test_result: any = $state(null);
-    let trace_details: any = $state(null);
-    let test_fqdn = $state('');
-    let db_counts: Record<string, number> = $state({});
-    let show_raw_keys = $state(false);
+// State Variables
+let test_result: any = $state(null);
+let trace_details: any = $state(null);
+let test_fqdn = $state('');
+let db_counts: Record<string, number> = $state({});
+let show_raw_keys = $state(false);
 
-    // Trace Controls
-    let trace_use_jwt = $state(true);
-    let trace_jwt_method = $state('header'); // 'header' or 'url'
-    let trace_use_bypass = $state(false);
-    let trace_agent_key = PUBLIC_AE_BOOTSTRAP_KEY;
-    let trace_use_agent_key = $state(false);
+// Trace Controls
+let trace_use_jwt = $state(true);
+let trace_jwt_method = $state('header'); // 'header' or 'url'
+let trace_use_bypass = $state(false);
+let trace_agent_key = PUBLIC_AE_BOOTSTRAP_KEY;
+let trace_use_agent_key = $state(false);
 
-    onMount(async () => {
-        console.log('Testing Dashboard: +page.svelte mounted');
-        await update_db_counts();
-    });
+onMount(async () => {
+    console.log('Testing Dashboard: +page.svelte mounted');
+    await update_db_counts();
+});
 
-    async function update_db_counts() {
-        try {
-            db_counts = {
-                user: await db_core.user.count(),
-                person: await db_core.person.count(),
-                account: await db_core.account.count(),
-                address: await db_core.address.count(),
-                contact: await db_core.contact.count(),
-                site: await db_core.site.count()
-            };
-        } catch (e) {
-            console.error('Failed to get DB counts:', e);
-        }
-    }
-
-    async function run_test(name: string, test_fn: () => Promise<any>) {
-        test_result = 'loading...';
-        trace_details = null;
-        try {
-            const result = await test_fn();
-            test_result = { test: name, timestamp: new Date().toISOString(), result };
-            await update_db_counts();
-        } catch (error: any) {
-            test_result = { test: name, error: error.message, details: error };
-        }
-    }
-
-    async function run_trace_test() {
-        test_result = 'loading...';
-        const endpoint = '/v3/crud/journal/';
-        const params: Record<string, any> = { limit: 1 };
-
-        const custom_headers: Record<string, string> = {};
-        const active_key = trace_use_agent_key ? trace_agent_key : $ae_api.api_secret_key;
-        custom_headers['x-aether-api-key'] = active_key;
-
-        if (trace_use_bypass) {
-            custom_headers['x-no-account-id'] = 'bypass';
-        } else {
-            custom_headers['x-account-id'] = $ae_loc.account_id || 'nqOzejLCDXM';
-        }
-
-        if (trace_use_jwt && $ae_loc.jwt) {
-            if (trace_jwt_method === 'header') {
-                custom_headers['Authorization'] = `Bearer ${$ae_loc.jwt}`;
-            } else {
-                params['jwt'] = $ae_loc.jwt;
-            }
-        }
-
-        trace_details = {
-            request: {
-                method: 'GET',
-                url: `${$ae_api.base_url}${endpoint}`,
-                params,
-                headers: custom_headers
-            }
+async function update_db_counts() {
+    try {
+        db_counts = {
+            user: await db_core.user.count(),
+            person: await db_core.person.count(),
+            account: await db_core.account.count(),
+            address: await db_core.address.count(),
+            contact: await db_core.contact.count(),
+            site: await db_core.site.count()
         };
+    } catch (e) {
+        console.error('Failed to get DB counts:', e);
+    }
+}
 
-        try {
-            const url = new URL(endpoint, $ae_api.base_url);
-            Object.keys(params).forEach(k => url.searchParams.append(k, String(params[k])));
+async function run_test(name: string, test_fn: () => Promise<any>) {
+    test_result = 'loading...';
+    trace_details = null;
+    try {
+        const result = await test_fn();
+        test_result = {
+            test: name,
+            timestamp: new Date().toISOString(),
+            result
+        };
+        await update_db_counts();
+    } catch (error: any) {
+        test_result = { test: name, error: error.message, details: error };
+    }
+}
 
-            const response = await fetch(url.toString(), {
-                method: 'GET',
-                headers: custom_headers
-            });
+async function run_trace_test() {
+    test_result = 'loading...';
+    const endpoint = '/v3/crud/journal/';
+    const params: Record<string, any> = { limit: 1 };
 
-            const status = response.status;
-            const statusText = response.statusText;
-            let body;
-            try { body = await response.json(); } catch (e) { body = await response.text(); }
+    const custom_headers: Record<string, string> = {};
+    const active_key = trace_use_agent_key
+        ? trace_agent_key
+        : $ae_api.api_secret_key;
+    custom_headers['x-aether-api-key'] = active_key;
 
-            trace_details.response = { status, statusText, body };
-            test_result = { test: 'V3 Journal Trace', status, success: response.ok };
-        } catch (error: any) {
-            test_result = { test: 'V3 Journal Trace', error: error.message };
-            trace_details.response_error = error;
+    if (trace_use_bypass) {
+        custom_headers['x-no-account-id'] = 'bypass';
+    } else {
+        custom_headers['x-account-id'] = $ae_loc.account_id || 'nqOzejLCDXM';
+    }
+
+    if (trace_use_jwt && $ae_loc.jwt) {
+        if (trace_jwt_method === 'header') {
+            custom_headers['Authorization'] = `Bearer ${$ae_loc.jwt}`;
+        } else {
+            params['jwt'] = $ae_loc.jwt;
         }
     }
 
-    const test_site_domain_lookup = () => run_test('Site Domain Lookup', async () => {
+    trace_details = {
+        request: {
+            method: 'GET',
+            url: `${$ae_api.base_url}${endpoint}`,
+            params,
+            headers: custom_headers
+        }
+    };
+
+    try {
+        const url = new URL(endpoint, $ae_api.base_url);
+        Object.keys(params).forEach((k) =>
+            url.searchParams.append(k, String(params[k]))
+        );
+
+        const response = await fetch(url.toString(), {
+            method: 'GET',
+            headers: custom_headers
+        });
+
+        const status = response.status;
+        const statusText = response.statusText;
+        let body;
+        try {
+            body = await response.json();
+        } catch (e) {
+            body = await response.text();
+        }
+
+        trace_details.response = { status, statusText, body };
+        test_result = {
+            test: 'V3 Journal Trace',
+            status,
+            success: response.ok
+        };
+    } catch (error: any) {
+        test_result = { test: 'V3 Journal Trace', error: error.message };
+        trace_details.response_error = error;
+    }
+}
+
+const test_site_domain_lookup = () =>
+    run_test('Site Domain Lookup', async () => {
         const fqdn = test_fqdn || window.location.host;
         return await lookup_site_domain({ api_cfg: $ae_api, fqdn, log_lvl: 1 });
     });
 
-    const test_load_accounts = () => run_test('Load Accounts', async () => {
-        return await load_ae_obj_li__account({ api_cfg: $ae_api, enabled: 'all', log_lvl: 1 });
+const test_load_accounts = () =>
+    run_test('Load Accounts', async () => {
+        return await load_ae_obj_li__account({
+            api_cfg: $ae_api,
+            enabled: 'all',
+            log_lvl: 1
+        });
     });
 
-    const test_whoami = () => run_test('Who Am I? (JWT Test)', async () => {
+const test_whoami = () =>
+    run_test('Who Am I? (JWT Test)', async () => {
         if (!$ae_loc.user_id) throw new Error('No user_id found in session.');
         return await load_ae_obj_id__user({
             api_cfg: $ae_api,
@@ -134,7 +184,8 @@
         });
     });
 
-    const clear_local_cache = () => run_test('Clear Local Cache', async () => {
+const clear_local_cache = () =>
+    run_test('Clear Local Cache', async () => {
         await Promise.all([
             db_core.user.clear(),
             db_core.person.clear(),
@@ -146,14 +197,17 @@
         return 'Local cache cleared successfully';
     });
 
-    const test_manifest = () => run_test('PWA Manifest Lookup', async () => {
+const test_manifest = () =>
+    run_test('PWA Manifest Lookup', async () => {
         const response = await fetch('/manifest.webmanifest');
-        if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        if (!response.ok)
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
         return await response.json();
     });
 
-    // V3 Schema & Error Validation
-    const test_permissive_mode = () => run_test('Permissive Mode Test', async () => {
+// V3 Schema & Error Validation
+const test_permissive_mode = () =>
+    run_test('Permissive Mode Test', async () => {
         // Capture current state at test time
         const current_ae_api = $ae_api;
         const current_ae_loc = $ae_loc;
@@ -164,7 +218,10 @@
             _non_existent_field: 'This should be ignored by the API'
         };
 
-        console.log('Permissive Mode: Starting PATCH test...', { endpoint, headers: current_ae_api.headers });
+        console.log('Permissive Mode: Starting PATCH test...', {
+            endpoint,
+            headers: current_ae_api.headers
+        });
 
         const result = await patch_object({
             api_cfg: current_ae_api,
@@ -173,29 +230,44 @@
             log_lvl: 1
         });
 
-        if (!result) throw new Error('API returned false. Check console for 401/403/500 errors.');
+        if (!result)
+            throw new Error(
+                'API returned false. Check console for 401/403/500 errors.'
+            );
 
         return {
-            message: 'SUCCESS: API accepted request with unknown field (Permissive Mode Active)',
+            message:
+                'SUCCESS: API accepted request with unknown field (Permissive Mode Active)',
             account_id: result.account_id,
-            id_vision: typeof result.account_id === 'string' ? 'V3 (String)' : 'LEGACY (Integer)',
+            id_vision:
+                typeof result.account_id === 'string'
+                    ? 'V3 (String)'
+                    : 'LEGACY (Integer)',
             returned_data: result
         };
     });
 
-    const test_structured_error = () => run_test('Structured Error Validation (Deliberate 400)', async () => {
+const test_structured_error = () =>
+    run_test('Structured Error Validation (Deliberate 400)', async () => {
         const current_ae_api = $ae_api;
 
         // Use the exact Recovery Meetings search pattern to verify why it's throwing 403
         const endpoint = `/v3/crud/event/search`;
         const search_query = {
             and: [
-                { field: "conference", op: "eq", value: 0 },
-                { field: "trigger_schema_violation_400", op: "eq", value: "fail" }
+                { field: 'conference', op: 'eq', value: 0 },
+                {
+                    field: 'trigger_schema_violation_400',
+                    op: 'eq',
+                    value: 'fail'
+                }
             ]
         };
 
-        console.log('Structured Error: Starting deliberate 400 test with Recovery filters...', { endpoint });
+        console.log(
+            'Structured Error: Starting deliberate 400 test with Recovery filters...',
+            { endpoint }
+        );
 
         const result = await post_object({
             api_cfg: current_ae_api,
@@ -209,108 +281,171 @@
             return {
                 success: true,
                 message: 'PASS: Successfully extracted rich error metadata',
-                source: result.meta.details.category === 'validation' ? 'FastAPI Detail (Wrapped)' : 'V3 Meta Envelope',
+                source:
+                    result.meta.details.category === 'validation'
+                        ? 'FastAPI Detail (Wrapped)'
+                        : 'V3 Meta Envelope',
                 details: result.meta.details
             };
         }
 
         return {
             success: false,
-            message: 'FAIL: API returned an error but the helper could not extract metadata.',
+            message:
+                'FAIL: API returned an error but the helper could not extract metadata.',
             raw_result: result
         };
     });
 
-    // Environment Diagnostics
-    let is_native = $derived(typeof window !== 'undefined' && !!(window as any).native_app);
-    let app_mode = $derived($events_loc?.launcher?.app_mode || 'web');
-
-    // Derived state for Header Inspection - dynamically reconstruct standard request headers
-    let active_headers = $derived({
-        ...($ae_api.headers || {}),
-        'x-account-id': $ae_loc.account_id || '(missing)',
-        'Authorization': $ae_loc.jwt ? `Bearer ${$ae_loc.jwt.slice(0, 10)}...` : '(missing)'
-    });
+// Environment Diagnostics
+let is_native = $derived(
+    typeof window !== 'undefined' && !!(window as any).native_app
+);
+let app_mode = $derived($events_loc?.launcher?.app_mode || 'web');
 
+// Derived state for Header Inspection - dynamically reconstruct standard request headers
+let active_headers = $derived({
+    ...($ae_api.headers || {}),
+    'x-account-id': $ae_loc.account_id || '(missing)',
+    Authorization: $ae_loc.jwt
+        ? `Bearer ${$ae_loc.jwt.slice(0, 10)}...`
+        : '(missing)'
+});
 </script>
 
 <!-- Outer wrapper to enable scrolling if parent is overflow-hidden -->
-<div class="h-full w-full overflow-y-auto overflow-x-hidden bg-transparent">
-    <div class="container mx-auto p-4 space-y-8 pb-20">
-        <header class="flex justify-between items-center bg-surface-50-900-token p-6 rounded-container shadow-xl border border-gray-500">
+<div class="h-full w-full overflow-x-hidden overflow-y-auto bg-transparent">
+    <div class="container mx-auto space-y-8 p-4 pb-20">
+        <header
+            class="bg-surface-50-900-token rounded-container flex items-center justify-between border border-gray-500 p-6 shadow-xl">
             <div class="space-y-1">
                 <h1 class="h1 flex items-center gap-3">
                     <Bug class="text-error-500" /> System Testing
                 </h1>
-                <p class="opacity-60 text-sm">Validation dashboard for Aether Platform V3</p>
+                <p class="text-sm opacity-60">
+                    Validation dashboard for Aether Platform V3
+                </p>
             </div>
             <div class="flex gap-4">
-                <div class="card p-3 variant-soft-secondary flex items-center gap-4 shadow-inner">
+                <div
+                    class="card variant-soft-secondary flex items-center gap-4 p-3 shadow-inner">
                     <div class="flex flex-col items-center px-2">
                         <span class="font-bold">{db_counts.user ?? 0}</span>
-                        <span class="text-[10px] uppercase opacity-60">Users</span>
+                        <span class="text-[10px] uppercase opacity-60"
+                            >Users</span>
+                    </div>
+                    <div class="divider-vertical h-8 border-l border-gray-500">
                     </div>
-                    <div class="divider-vertical h-8 border-l border-gray-500"></div>
                     <div class="flex flex-col items-center px-2">
                         <span class="font-bold">{db_counts.person ?? 0}</span>
-                        <span class="text-[10px] uppercase opacity-60">People</span>
+                        <span class="text-[10px] uppercase opacity-60"
+                            >People</span>
                     </div>
-                    <div class="divider-vertical h-8 border-l border-gray-500"></div>
-                    <button class="btn-icon btn-icon-sm hover:variant-filled-secondary transition-all" onclick={update_db_counts} title="Refresh Row Counts">
+                    <div class="divider-vertical h-8 border-l border-gray-500">
+                    </div>
+                    <button
+                        class="btn-icon btn-icon-sm hover:variant-filled-secondary transition-all"
+                        onclick={update_db_counts}
+                        title="Refresh Row Counts">
                         <RefreshCcw size={14} />
                     </button>
                 </div>
             </div>
         </header>
 
-        <div class="grid grid-cols-1 xl:grid-cols-[1fr_400px] gap-8">
+        <div class="grid grid-cols-1 gap-8 xl:grid-cols-[1fr_400px]">
             <main class="space-y-6">
-
                 <!-- Environment & Bridge Card -->
-                <div class="card p-6 variant-soft-tertiary space-y-4 border border-gray-500 shadow-lg">
-                    <header class="flex justify-between items-center border-b border-gray-500 pb-3">
-                        <div class="flex items-center gap-2 text-tertiary-700 dark:text-tertiary-300">
+                <div
+                    class="card variant-soft-tertiary space-y-4 border border-gray-500 p-6 shadow-lg">
+                    <header
+                        class="flex items-center justify-between border-b border-gray-500 pb-3">
+                        <div
+                            class="text-tertiary-700 dark:text-tertiary-300 flex items-center gap-2">
                             <Satellite size={20} />
-                            <h3 class="h3 font-bold">Environment & Bridge Diagnostics</h3>
+                            <h3 class="h3 font-bold">
+                                Environment & Bridge Diagnostics
+                            </h3>
                         </div>
-                        <span class="badge variant-filled-tertiary font-mono p-2 uppercase">
+                        <span
+                            class="badge variant-filled-tertiary p-2 font-mono uppercase">
                             Runtime: {is_native ? 'Electron' : 'Web Browser'}
                         </span>
                     </header>
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                        <div class="flex flex-col p-3 bg-gray-500/10 rounded" title="The current logic mode of the application (e.g. native, onsite, web).">
-                            <span class="text-[10px] uppercase opacity-50 font-bold">App Mode</span>
-                            <span class="text-sm font-bold text-tertiary-600 dark:text-tertiary-400 uppercase tracking-widest">{app_mode}</span>
+                    <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+                        <div
+                            class="flex flex-col rounded bg-gray-500/10 p-3"
+                            title="The current logic mode of the application (e.g. native, onsite, web).">
+                            <span
+                                class="text-[10px] font-bold uppercase opacity-50"
+                                >App Mode</span>
+                            <span
+                                class="text-tertiary-600 dark:text-tertiary-400 text-sm font-bold tracking-widest uppercase"
+                                >{app_mode}</span>
                         </div>
-                        <div class="flex flex-col p-3 bg-gray-500/10 rounded" title="Presence of window.native_app bridge object.">
-                            <span class="text-[10px] uppercase opacity-50 font-bold">Bridge Detected</span>
+                        <div
+                            class="flex flex-col rounded bg-gray-500/10 p-3"
+                            title="Presence of window.native_app bridge object.">
+                            <span
+                                class="text-[10px] font-bold uppercase opacity-50"
+                                >Bridge Detected</span>
                             <div class="flex items-center gap-2">
-                                <div class="w-2 h-2 rounded-full {is_native ? 'bg-success-500 animate-pulse' : 'bg-surface-500'}"></div>
-                                <span class="text-sm font-semibold">{is_native ? 'Active' : 'Missing / Inactive'}</span>
+                                <div
+                                    class="h-2 w-2 rounded-full {is_native
+                                        ? 'bg-success-500 animate-pulse'
+                                        : 'bg-surface-500'}">
+                                </div>
+                                <span class="text-sm font-semibold"
+                                    >{is_native
+                                        ? 'Active'
+                                        : 'Missing / Inactive'}</span>
                             </div>
                         </div>
-                        <div class="flex flex-col p-3 bg-gray-500/10 rounded" title="The host string being used for bootstrap site resolution.">
-                            <span class="text-[10px] uppercase opacity-50 font-bold">Bootstrap Host</span>
-                            <span class="font-mono text-xs truncate">{$ae_loc.hostname || '--'}</span>
+                        <div
+                            class="flex flex-col rounded bg-gray-500/10 p-3"
+                            title="The host string being used for bootstrap site resolution.">
+                            <span
+                                class="text-[10px] font-bold uppercase opacity-50"
+                                >Bootstrap Host</span>
+                            <span class="truncate font-mono text-xs"
+                                >{$ae_loc.hostname || '--'}</span>
                         </div>
                     </div>
                 </div>
 
                 <!-- Header Inspection Card -->
-                <div class="card p-6 variant-soft-primary space-y-4 border border-gray-500 shadow-lg">
-                    <header class="flex justify-between items-center border-b border-gray-500 pb-3">
-                        <div class="flex items-center gap-2 text-primary-700 dark:text-primary-300">
+                <div
+                    class="card variant-soft-primary space-y-4 border border-gray-500 p-6 shadow-lg">
+                    <header
+                        class="flex items-center justify-between border-b border-gray-500 pb-3">
+                        <div
+                            class="text-primary-700 dark:text-primary-300 flex items-center gap-2">
                             <Settings2 size={20} />
-                            <h3 class="h3 font-bold">Live V3 Header Inspection</h3>
+                            <h3 class="h3 font-bold">
+                                Live V3 Header Inspection
+                            </h3>
                         </div>
-                        <span class="text-[10px] font-mono opacity-50 uppercase tracking-tighter">Real-time API Store View</span>
+                        <span
+                            class="font-mono text-[10px] tracking-tighter uppercase opacity-50"
+                            >Real-time API Store View</span>
                     </header>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                         {#each Object.entries(active_headers) as [key, value] (key)}
-                            <div class="flex justify-between items-center p-3 bg-gray-500/10 rounded border border-gray-500/20">
-                                <span class="text-[10px] font-mono font-bold opacity-70">{key}</span>
-                                <span class="text-xs font-mono {key === 'x-ae-ignore-extra-fields' ? 'text-success-500 font-bold' : ''}">
-                                    {key.includes('key') || key.includes('token') || key.includes('account') ? '********' : value}
+                            <div
+                                class="flex items-center justify-between rounded border border-gray-500/20 bg-gray-500/10 p-3">
+                                <span
+                                    class="font-mono text-[10px] font-bold opacity-70"
+                                    >{key}</span>
+                                <span
+                                    class="font-mono text-xs {key ===
+                                    'x-ae-ignore-extra-fields'
+                                        ? 'text-success-500 font-bold'
+                                        : ''}">
+                                    {key.includes('key') ||
+                                    key.includes('token') ||
+                                    key.includes('account')
+                                        ? '********'
+                                        : value}
                                 </span>
                             </div>
                         {/each}
@@ -318,46 +453,81 @@
                 </div>
 
                 <!-- Session Context Card -->
-                <div class="card p-6 variant-soft-surface space-y-4 border border-gray-500 shadow-lg">
-                    <header class="flex justify-between items-center border-b border-gray-500 pb-3">
-                        <div class="flex items-center gap-2 text-surface-700 dark:text-surface-300">
+                <div
+                    class="card variant-soft-surface space-y-4 border border-gray-500 p-6 shadow-lg">
+                    <header
+                        class="flex items-center justify-between border-b border-gray-500 pb-3">
+                        <div
+                            class="text-surface-700 dark:text-surface-300 flex items-center gap-2">
                             <User size={20} />
                             <h3 class="h3 font-bold">Active Session Context</h3>
                         </div>
-                        <span class="badge variant-filled-primary font-mono p-2" title="Your current logical rank in the application (e.g. super, manager, trusted).">
+                        <span
+                            class="badge variant-filled-primary p-2 font-mono"
+                            title="Your current logical rank in the application (e.g. super, manager, trusted).">
                             Level: {$ae_loc.access_type || 'anonymous'}
                         </span>
                     </header>
-                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                        <div class="flex flex-col p-3 bg-gray-500/10 rounded" title="The Aether Username from the User object.">
-                            <span class="text-[10px] uppercase opacity-50 font-bold">Username</span>
-                            <span class="font-mono text-sm truncate">{$ae_loc.user?.username || '--'}</span>
+                    <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
+                        <div
+                            class="flex flex-col rounded bg-gray-500/10 p-3"
+                            title="The Aether Username from the User object.">
+                            <span
+                                class="text-[10px] font-bold uppercase opacity-50"
+                                >Username</span>
+                            <span class="truncate font-mono text-sm"
+                                >{$ae_loc.user?.username || '--'}</span>
                         </div>
-                        <div class="flex flex-col p-3 bg-gray-500/10 rounded" title="Full Name from the linked Person object.">
-                            <span class="text-[10px] uppercase opacity-50 font-bold">Full Name</span>
-                            <span class="text-sm font-semibold truncate">{$ae_loc.person?.full_name || '--'}</span>
+                        <div
+                            class="flex flex-col rounded bg-gray-500/10 p-3"
+                            title="Full Name from the linked Person object.">
+                            <span
+                                class="text-[10px] font-bold uppercase opacity-50"
+                                >Full Name</span>
+                            <span class="truncate text-sm font-semibold"
+                                >{$ae_loc.person?.full_name || '--'}</span>
                         </div>
-                        <div class="flex flex-col items-center p-3 rounded bg-gray-500/10" title="TRUE if session has matched a 'Trusted' level site passcode.">
-                            <span class="text-[10px] uppercase opacity-50 font-bold">Trusted</span>
-                            <div class="flex items-center gap-1 mt-1">
+                        <div
+                            class="flex flex-col items-center rounded bg-gray-500/10 p-3"
+                            title="TRUE if session has matched a 'Trusted' level site passcode.">
+                            <span
+                                class="text-[10px] font-bold uppercase opacity-50"
+                                >Trusted</span>
+                            <div class="mt-1 flex items-center gap-1">
                                 {#if $ae_loc.trusted_access}
-                                    <ShieldCheck size={18} class="text-success-500" />
-                                    <span class="text-[10px] text-success-500 font-bold uppercase">YES</span>
+                                    <ShieldCheck
+                                        size={18}
+                                        class="text-success-500" />
+                                    <span
+                                        class="text-success-500 text-[10px] font-bold uppercase"
+                                        >YES</span>
                                 {:else}
                                     <Unlock size={18} class="opacity-30" />
-                                    <span class="text-[10px] opacity-30 font-bold uppercase">NO</span>
+                                    <span
+                                        class="text-[10px] font-bold uppercase opacity-30"
+                                        >NO</span>
                                 {/if}
                             </div>
                         </div>
-                        <div class="flex flex-col items-center p-3 rounded bg-gray-500/10" title="TRUE if user has signed in with credentials (Username/Email).">
-                            <span class="text-[10px] uppercase opacity-50 font-bold">Authenticated</span>
-                            <div class="flex items-center gap-1 mt-1">
+                        <div
+                            class="flex flex-col items-center rounded bg-gray-500/10 p-3"
+                            title="TRUE if user has signed in with credentials (Username/Email).">
+                            <span
+                                class="text-[10px] font-bold uppercase opacity-50"
+                                >Authenticated</span>
+                            <div class="mt-1 flex items-center gap-1">
                                 {#if $ae_loc.authenticated_access}
-                                    <ShieldCheck size={18} class="text-success-500" />
-                                    <span class="text-[10px] text-success-500 font-bold uppercase">YES</span>
+                                    <ShieldCheck
+                                        size={18}
+                                        class="text-success-500" />
+                                    <span
+                                        class="text-success-500 text-[10px] font-bold uppercase"
+                                        >YES</span>
                                 {:else}
                                     <Unlock size={18} class="opacity-30" />
-                                    <span class="text-[10px] opacity-30 font-bold uppercase">NO</span>
+                                    <span
+                                        class="text-[10px] font-bold uppercase opacity-30"
+                                        >NO</span>
                                 {/if}
                             </div>
                         </div>
@@ -365,102 +535,207 @@
                 </div>
 
                 <!-- Security Dashboard -->
-                <div class="card p-6 variant-soft-warning space-y-6 shadow-lg border border-warning-500">
-                    <header class="flex justify-between items-center border-b border-warning-500 pb-3">
-                        <div class="flex items-center gap-2 text-warning-700 dark:text-warning-500">
+                <div
+                    class="card variant-soft-warning border-warning-500 space-y-6 border p-6 shadow-lg">
+                    <header
+                        class="border-warning-500 flex items-center justify-between border-b pb-3">
+                        <div
+                            class="text-warning-700 dark:text-warning-500 flex items-center gap-2">
                             <Key size={20} />
                             <h3 class="h3 font-bold">API Security Controls</h3>
                         </div>
-                        <button class="btn btn-sm variant-filled-warning shadow-md transition-all hover:scale-105" onclick={() => show_raw_keys = !show_raw_keys} title="Toggle visibility of the raw secret keys for character verification.">
-                            {#if show_raw_keys} <EyeOff size={14} class="mr-2" /> Hide Raw {:else} <Eye size={14} class="mr-2" /> Inspect Raw {/if}
+                        <button
+                            class="btn btn-sm variant-filled-warning shadow-md transition-all hover:scale-105"
+                            onclick={() => (show_raw_keys = !show_raw_keys)}
+                            title="Toggle visibility of the raw secret keys for character verification.">
+                            {#if show_raw_keys}
+                                <EyeOff size={14} class="mr-2" /> Hide Raw
+                            {:else}
+                                <Eye size={14} class="mr-2" /> Inspect Raw
+                            {/if}
                         </button>
                     </header>
 
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
                         <label class="label space-y-2">
-                            <span class="text-[10px] uppercase font-bold opacity-70 flex items-center gap-1" title="Primary secret key identifying this application. Required for ALL V3 requests. Sent as 'x-aether-api-key'.">
-                                Active API Key <span class="text-secondary-500"><Info size={10} /></span>
+                            <span
+                                class="flex items-center gap-1 text-[10px] font-bold uppercase opacity-70"
+                                title="Primary secret key identifying this application. Required for ALL V3 requests. Sent as 'x-aether-api-key'.">
+                                Active API Key <span class="text-secondary-500"
+                                    ><Info size={10} /></span>
                             </span>
-                            <div class="flex shadow-sm border border-gray-500 rounded-lg overflow-hidden bg-surface-500/10">
-                                <input type={show_raw_keys ? 'text' : 'password'} readonly value={$ae_api.api_secret_key || 'MISSING'} class="flex-1 font-mono text-xs p-3 bg-transparent border-none focus:ring-0" />
-                                <div class="bg-gray-500/20 p-3 flex items-center">{#if $ae_api.api_secret_key}<CircleCheck size="1em" class="text-success-500" />{:else}<CircleCheck size="1em" class="opacity-20" />{/if}</div>
+                            <div
+                                class="bg-surface-500/10 flex overflow-hidden rounded-lg border border-gray-500 shadow-sm">
+                                <input
+                                    type={show_raw_keys ? 'text' : 'password'}
+                                    readonly
+                                    value={$ae_api.api_secret_key || 'MISSING'}
+                                    class="flex-1 border-none bg-transparent p-3 font-mono text-xs focus:ring-0" />
+                                <div
+                                    class="flex items-center bg-gray-500/20 p-3">
+                                    {#if $ae_api.api_secret_key}<CircleCheck
+                                            size="1em"
+                                            class="text-success-500" />{:else}<CircleCheck
+                                            size="1em"
+                                            class="opacity-20" />{/if}
+                                </div>
                             </div>
                         </label>
                         <label class="label space-y-2">
-                            <span class="text-[10px] uppercase font-bold opacity-70 flex items-center gap-1" title="Token received after successful user login. Stored in localStorage ($ae_loc.jwt). Required for multi-tenant isolation.">
-                                Local JWT Store <span class="text-secondary-500"><Info size={10} /></span>
+                            <span
+                                class="flex items-center gap-1 text-[10px] font-bold uppercase opacity-70"
+                                title="Token received after successful user login. Stored in localStorage ($ae_loc.jwt). Required for multi-tenant isolation.">
+                                Local JWT Store <span class="text-secondary-500"
+                                    ><Info size={10} /></span>
                             </span>
-                            <div class="flex shadow-sm border border-gray-500 rounded-lg overflow-hidden bg-surface-500/10">
-                                <input type={show_raw_keys ? 'text' : 'password'} readonly value={$ae_loc.jwt || 'No Token'} class="flex-1 font-mono text-xs p-3 bg-transparent border-none focus:ring-0" />
-                                <div class="bg-gray-500/20 p-3 flex items-center">{#if $ae_loc.jwt}<Key size="1em" class="text-warning-500" />{:else}<Key size="1em" class="opacity-20" />{/if}</div>
+                            <div
+                                class="bg-surface-500/10 flex overflow-hidden rounded-lg border border-gray-500 shadow-sm">
+                                <input
+                                    type={show_raw_keys ? 'text' : 'password'}
+                                    readonly
+                                    value={$ae_loc.jwt || 'No Token'}
+                                    class="flex-1 border-none bg-transparent p-3 font-mono text-xs focus:ring-0" />
+                                <div
+                                    class="flex items-center bg-gray-500/20 p-3">
+                                    {#if $ae_loc.jwt}<Key
+                                            size="1em"
+                                            class="text-warning-500" />{:else}<Key
+                                            size="1em"
+                                            class="opacity-20" />{/if}
+                                </div>
                             </div>
                         </label>
                         <label class="label space-y-2">
-                            <span class="text-[10px] uppercase font-bold opacity-70 flex items-center gap-1" title="Verifies if the Local JWT has been synced to the active API configuration ($ae_api.jwt).">
-                                Sync Status <span class="text-secondary-500"><Info size={10} /></span>
+                            <span
+                                class="flex items-center gap-1 text-[10px] font-bold uppercase opacity-70"
+                                title="Verifies if the Local JWT has been synced to the active API configuration ($ae_api.jwt).">
+                                Sync Status <span class="text-secondary-500"
+                                    ><Info size={10} /></span>
                             </span>
-                            <div class="card p-2 text-center text-xs font-bold border border-gray-500 shadow-sm flex items-center justify-center h-[46px] bg-transparent">
+                            <div
+                                class="card flex h-[46px] items-center justify-center border border-gray-500 bg-transparent p-2 text-center text-xs font-bold shadow-sm">
                                 {#if $ae_api.jwt === $ae_loc.jwt}
-                                    <span class="text-success-600 dark:text-success-400 flex items-center gap-1"><ShieldCheck size={14}/> HANDSHAKE OK</span>
+                                    <span
+                                        class="text-success-600 dark:text-success-400 flex items-center gap-1"
+                                        ><ShieldCheck size={14} /> HANDSHAKE OK</span>
                                 {:else}
-                                    <span class="text-error-600 dark:text-error-400 flex items-center gap-1"><ShieldAlert size={14}/> MISMATCH</span>
+                                    <span
+                                        class="text-error-600 dark:text-error-400 flex items-center gap-1"
+                                        ><ShieldAlert size={14} /> MISMATCH</span>
                                 {/if}
                             </div>
                         </label>
                     </div>
 
                     {#if show_raw_keys}
-                        <div class="p-4 bg-black/20 rounded-container text-[10px] font-mono break-all space-y-2 border border-gray-500 shadow-inner">
-                            <p class="text-warning-500 font-bold border-b border-gray-500 pb-1 flex items-center gap-2 uppercase tracking-widest">
+                        <div
+                            class="rounded-container space-y-2 border border-gray-500 bg-black/20 p-4 font-mono text-[10px] break-all shadow-inner">
+                            <p
+                                class="text-warning-500 flex items-center gap-2 border-b border-gray-500 pb-1 font-bold tracking-widest uppercase">
                                 <Bug size={12} /> Raw Strings
                             </p>
-                            <div class="grid grid-cols-[80px_1fr] gap-x-2 gap-y-1">
-                                <span class="opacity-50">CUR_KEY:</span> <span>{$ae_api.api_secret_key}</span>
-                                <span class="opacity-50">AGT_KEY:</span> <span>{trace_agent_key}</span>
-                                <span class="opacity-50">LOC_JWT:</span> <span>{$ae_loc.jwt || 'NULL'}</span>
+                            <div
+                                class="grid grid-cols-[80px_1fr] gap-x-2 gap-y-1">
+                                <span class="opacity-50">CUR_KEY:</span>
+                                <span>{$ae_api.api_secret_key}</span>
+                                <span class="opacity-50">AGT_KEY:</span>
+                                <span>{trace_agent_key}</span>
+                                <span class="opacity-50">LOC_JWT:</span>
+                                <span>{$ae_loc.jwt || 'NULL'}</span>
                             </div>
                         </div>
                     {/if}
 
                     <div class="space-y-4 border-t border-gray-500 pt-6">
                         <header class="flex items-center gap-2">
-                            <FlaskConical size={18} class="text-secondary-500"/>
+                            <FlaskConical
+                                size={18}
+                                class="text-secondary-500" />
                             <h4 class="h4 font-bold">V3 Trace Controls</h4>
                         </header>
-                        <div class="p-4 bg-gray-500/5 rounded-container border border-gray-500 space-y-4 shadow-inner">
+                        <div
+                            class="rounded-container space-y-4 border border-gray-500 bg-gray-500/5 p-4 shadow-inner">
                             <div class="flex flex-wrap gap-6 text-sm">
-                                <label class="flex items-center gap-2 cursor-pointer group" title="When checked, the request will include the JWT token. Mandatory for nearly all V3 CRUD calls.">
-                                    <input type="checkbox" class="checkbox" bind:checked={trace_use_jwt} />
-                                    <span class="group-hover:text-secondary-500 transition-colors">Include JWT</span>
+                                <label
+                                    class="group flex cursor-pointer items-center gap-2"
+                                    title="When checked, the request will include the JWT token. Mandatory for nearly all V3 CRUD calls.">
+                                    <input
+                                        type="checkbox"
+                                        class="checkbox"
+                                        bind:checked={trace_use_jwt} />
+                                    <span
+                                        class="group-hover:text-secondary-500 transition-colors"
+                                        >Include JWT</span>
                                 </label>
-                                <label class="flex items-center gap-2 cursor-pointer group" title="Sets 'x-no-account-id: bypass'. Combined with valid API Key, grants superuser access across all accounts.">
-                                    <input type="checkbox" class="checkbox" bind:checked={trace_use_bypass} />
-                                    <span class="group-hover:text-error-500 transition-colors">Bypass Header</span>
+                                <label
+                                    class="group flex cursor-pointer items-center gap-2"
+                                    title="Sets 'x-no-account-id: bypass'. Combined with valid API Key, grants superuser access across all accounts.">
+                                    <input
+                                        type="checkbox"
+                                        class="checkbox"
+                                        bind:checked={trace_use_bypass} />
+                                    <span
+                                        class="group-hover:text-error-500 transition-colors"
+                                        >Bypass Header</span>
                                 </label>
-                                <label class="flex items-center gap-2 cursor-pointer group" title="Test using the dedicated Agent API Key (IDF68...).">
-                                    <input type="checkbox" class="checkbox" bind:checked={trace_use_agent_key} />
-                                    <span class="text-secondary-600 font-bold underline decoration-dotted">Use Agent Key</span>
+                                <label
+                                    class="group flex cursor-pointer items-center gap-2"
+                                    title="Test using the dedicated Agent API Key (IDF68...).">
+                                    <input
+                                        type="checkbox"
+                                        class="checkbox"
+                                        bind:checked={trace_use_agent_key} />
+                                    <span
+                                        class="text-secondary-600 font-bold underline decoration-dotted"
+                                        >Use Agent Key</span>
                                 </label>
                             </div>
 
-                            <div class="flex flex-wrap gap-6 pt-3 border-t border-gray-500 mt-2" title="Section 6: JWT can be sent via Header (standard) or URL Parameter (for direct links/downloads).">
-                                <span class="text-[10px] uppercase font-bold opacity-50 flex items-center gap-1">JWT Method <span class="text-secondary-500"><Info size={10} /></span>:</span>
-                                <label class="flex items-center gap-3 cursor-pointer">
-                                    <input type="radio" name="jwt_method" value="header" bind:group={trace_jwt_method} class="radio" />
-                                    <span class="text-xs font-semibold">Header (Bearer)</span>
+                            <div
+                                class="mt-2 flex flex-wrap gap-6 border-t border-gray-500 pt-3"
+                                title="Section 6: JWT can be sent via Header (standard) or URL Parameter (for direct links/downloads).">
+                                <span
+                                    class="flex items-center gap-1 text-[10px] font-bold uppercase opacity-50"
+                                    >JWT Method <span class="text-secondary-500"
+                                        ><Info size={10} /></span
+                                    >:</span>
+                                <label
+                                    class="flex cursor-pointer items-center gap-3">
+                                    <input
+                                        type="radio"
+                                        name="jwt_method"
+                                        value="header"
+                                        bind:group={trace_jwt_method}
+                                        class="radio" />
+                                    <span class="text-xs font-semibold"
+                                        >Header (Bearer)</span>
                                 </label>
-                                <label class="flex items-center gap-3 cursor-pointer">
-                                    <input type="radio" name="jwt_method" value="url" bind:group={trace_jwt_method} class="radio" />
-                                    <span class="text-xs font-semibold">URL Param (?jwt=)</span>
+                                <label
+                                    class="flex cursor-pointer items-center gap-3">
+                                    <input
+                                        type="radio"
+                                        name="jwt_method"
+                                        value="url"
+                                        bind:group={trace_jwt_method}
+                                        class="radio" />
+                                    <span class="text-xs font-semibold"
+                                        >URL Param (?jwt=)</span>
                                 </label>
                             </div>
                         </div>
 
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <button class="btn variant-filled-secondary p-4 font-bold shadow-lg transition-all hover:brightness-110 active:scale-95 flex items-center justify-center gap-2" onclick={run_trace_test} title="Initiate GET request to /v3/crud/journal/ and capture headers.">
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                            <button
+                                class="btn variant-filled-secondary flex items-center justify-center gap-2 p-4 font-bold shadow-lg transition-all hover:brightness-110 active:scale-95"
+                                onclick={run_trace_test}
+                                title="Initiate GET request to /v3/crud/journal/ and capture headers.">
                                 <ArrowRightLeft size={16} /> RUN TRACE
                             </button>
-                            <button class="btn variant-filled-warning p-4 font-bold shadow-lg transition-all hover:brightness-110 active:scale-95 flex items-center justify-center gap-2" disabled={!$ae_loc.jwt} onclick={test_whoami} title="Verify user authentication by loading your own profile.">
+                            <button
+                                class="btn variant-filled-warning flex items-center justify-center gap-2 p-4 font-bold shadow-lg transition-all hover:brightness-110 active:scale-95"
+                                disabled={!$ae_loc.jwt}
+                                onclick={test_whoami}
+                                title="Verify user authentication by loading your own profile.">
                                 <UserCheck size={16} /> WHO AM I?
                             </button>
                         </div>
@@ -469,96 +744,193 @@
 
                 <!-- Trace Visualizer -->
                 {#if trace_details}
-                    <div class="card p-6 variant-soft-secondary space-y-4 shadow-xl border border-gray-500">
-                        <header class="flex items-center gap-2 border-b border-gray-500 pb-3">
+                    <div
+                        class="card variant-soft-secondary space-y-4 border border-gray-500 p-6 shadow-xl">
+                        <header
+                            class="flex items-center gap-2 border-b border-gray-500 pb-3">
                             <Code size={20} class="text-secondary-500" />
-                            <h3 class="h3 font-bold">Request / Response Trace</h3>
+                            <h3 class="h3 font-bold">
+                                Request / Response Trace
+                            </h3>
                         </header>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 font-mono text-[10px]">
+                        <div
+                            class="grid grid-cols-1 gap-6 font-mono text-[10px] md:grid-cols-2">
                             <div class="space-y-2">
-                                <p class="font-bold opacity-70 tracking-widest uppercase">📤 Sent</p>
-                                <div class="bg-black/20 p-4 rounded shadow-inner border border-black/10 overflow-auto">
-                                    <p class="mb-2 text-secondary-500 font-bold">URL: {trace_details.request.url}</p>
-                                    <p class="mb-1 text-secondary-500 underline uppercase">Headers:</p>
-                                    <pre>{JSON.stringify(trace_details.request.headers, null, 2)}</pre>
+                                <p
+                                    class="font-bold tracking-widest uppercase opacity-70">
+                                    📤 Sent
+                                </p>
+                                <div
+                                    class="overflow-auto rounded border border-black/10 bg-black/20 p-4 shadow-inner">
+                                    <p
+                                        class="text-secondary-500 mb-2 font-bold">
+                                        URL: {trace_details.request.url}
+                                    </p>
+                                    <p
+                                        class="text-secondary-500 mb-1 uppercase underline">
+                                        Headers:
+                                    </p>
+                                    <pre>{JSON.stringify(
+                                            trace_details.request.headers,
+                                            null,
+                                            2
+                                        )}</pre>
                                 </div>
                             </div>
                             <div class="space-y-2">
-                                <p class="font-bold opacity-70 tracking-widest uppercase">📥 Received</p>
-                                <div class="bg-black/20 p-4 rounded shadow-inner border border-black/10 overflow-auto max-h-[400px] border-l-4"
-                                     class:border-l-success-500={test_result?.success}
-                                     class:border-l-error-500={!test_result?.success}>
-                                    <pre>{JSON.stringify(trace_details.response || trace_details.response_error, null, 2)}</pre>
+                                <p
+                                    class="font-bold tracking-widest uppercase opacity-70">
+                                    📥 Received
+                                </p>
+                                <div
+                                    class="max-h-[400px] overflow-auto rounded border border-l-4 border-black/10 bg-black/20 p-4 shadow-inner"
+                                    class:border-l-success-500={test_result?.success}
+                                    class:border-l-error-500={!test_result?.success}>
+                                    <pre>{JSON.stringify(
+                                            trace_details.response ||
+                                                trace_details.response_error,
+                                            null,
+                                            2
+                                        )}</pre>
                                 </div>
                             </div>
                         </div>
                     </div>
                 {/if}
 
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                    <div class="card p-6 space-y-4 border border-gray-500 shadow-lg transition-all group hover:bg-surface-500/5">
-                                        <header class="flex items-center gap-2 text-primary-500 border-b border-gray-500 pb-2">
-                                            <Server size={20}/>
-                                            <h4 class="h4 font-bold uppercase tracking-widest">Infrastructure</h4>
-                                        </header>
-                                        <button class="btn variant-filled-primary p-4 w-full shadow-md transition-all hover:scale-[1.02] flex items-center justify-center gap-2" onclick={test_site_domain_lookup} title="Test guest site domain lookup.">
-                                            <Globe size={16}/> Site Domain Lookup
-                                        </button>
-                                        <button class="btn variant-filled-primary p-4 w-full shadow-md transition-all hover:scale-[1.02] flex items-center justify-center gap-2" onclick={test_manifest} title="Verifies the dynamic PWA manifest returns correct branding for this domain.">
-                                            <Code size={16}/> PWA Manifest Lookup
-                                        </button>
-                                    </div>                    <div class="card p-6 space-y-4 border border-gray-500 shadow-lg transition-all group hover:bg-surface-500/5">
-                        <header class="flex items-center gap-2 text-secondary-500 border-b border-gray-500 pb-2">
-                            <Database size={20}/>
-                            <h4 class="h4 font-bold uppercase tracking-widest">Core V3</h4>
+                <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+                    <div
+                        class="card group hover:bg-surface-500/5 space-y-4 border border-gray-500 p-6 shadow-lg transition-all">
+                        <header
+                            class="text-primary-500 flex items-center gap-2 border-b border-gray-500 pb-2">
+                            <Server size={20} />
+                            <h4 class="h4 font-bold tracking-widest uppercase">
+                                Infrastructure
+                            </h4>
                         </header>
-                        <button class="btn variant-filled-secondary p-4 w-full shadow-md transition-all hover:scale-[1.02] flex items-center justify-center gap-2" onclick={test_load_accounts} title="Test authenticated accounts load.">
-                            <Building2 size={16}/> Load Accounts
+                        <button
+                            class="btn variant-filled-primary flex w-full items-center justify-center gap-2 p-4 shadow-md transition-all hover:scale-[1.02]"
+                            onclick={test_site_domain_lookup}
+                            title="Test guest site domain lookup.">
+                            <Globe size={16} /> Site Domain Lookup
+                        </button>
+                        <button
+                            class="btn variant-filled-primary flex w-full items-center justify-center gap-2 p-4 shadow-md transition-all hover:scale-[1.02]"
+                            onclick={test_manifest}
+                            title="Verifies the dynamic PWA manifest returns correct branding for this domain.">
+                            <Code size={16} /> PWA Manifest Lookup
                         </button>
                     </div>
-                    <div class="card p-6 space-y-4 border border-gray-500 shadow-lg transition-all group hover:bg-surface-500/5">
-                        <header class="flex items-center gap-2 text-warning-500 border-b border-gray-500 pb-2">
-                            <ShieldAlert size={20}/>
-                            <h4 class="h4 font-bold uppercase tracking-widest">V3 Hardening</h4>
+                    <div
+                        class="card group hover:bg-surface-500/5 space-y-4 border border-gray-500 p-6 shadow-lg transition-all">
+                        <header
+                            class="text-secondary-500 flex items-center gap-2 border-b border-gray-500 pb-2">
+                            <Database size={20} />
+                            <h4 class="h4 font-bold tracking-widest uppercase">
+                                Core V3
+                            </h4>
                         </header>
-                        <button class="btn variant-filled-warning p-4 w-full shadow-md transition-all hover:scale-[1.02] flex items-center justify-center gap-2" onclick={test_permissive_mode} title="Verifies the API ignores unknown fields (x-ae-ignore-extra-fields).">
-                            <Zap size={16}/> Permissive Mode Test
+                        <button
+                            class="btn variant-filled-secondary flex w-full items-center justify-center gap-2 p-4 shadow-md transition-all hover:scale-[1.02]"
+                            onclick={test_load_accounts}
+                            title="Test authenticated accounts load.">
+                            <Building2 size={16} /> Load Accounts
                         </button>
-                        <button class="btn variant-filled-error p-4 w-full shadow-md transition-all hover:scale-[1.02] flex items-center justify-center gap-2" onclick={test_structured_error} title="Deliberately triggers a 400 error to verify rich metadata extraction.">
-                            <ShieldAlert size={16}/> Structured Error Test
+                    </div>
+                    <div
+                        class="card group hover:bg-surface-500/5 space-y-4 border border-gray-500 p-6 shadow-lg transition-all">
+                        <header
+                            class="text-warning-500 flex items-center gap-2 border-b border-gray-500 pb-2">
+                            <ShieldAlert size={20} />
+                            <h4 class="h4 font-bold tracking-widest uppercase">
+                                V3 Hardening
+                            </h4>
+                        </header>
+                        <button
+                            class="btn variant-filled-warning flex w-full items-center justify-center gap-2 p-4 shadow-md transition-all hover:scale-[1.02]"
+                            onclick={test_permissive_mode}
+                            title="Verifies the API ignores unknown fields (x-ae-ignore-extra-fields).">
+                            <Zap size={16} /> Permissive Mode Test
+                        </button>
+                        <button
+                            class="btn variant-filled-error flex w-full items-center justify-center gap-2 p-4 shadow-md transition-all hover:scale-[1.02]"
+                            onclick={test_structured_error}
+                            title="Deliberately triggers a 400 error to verify rich metadata extraction.">
+                            <ShieldAlert size={16} /> Structured Error Test
                         </button>
                     </div>
                 </div>
 
                 <!-- Maintenance -->
-                <div class="card p-6 variant-soft-error flex justify-between items-center shadow-lg border border-error-500">
-                    <div class="flex items-center gap-4 text-error-700 dark:text-error-400">
-                        <Trash2 size={24}/>
+                <div
+                    class="card variant-soft-error border-error-500 flex items-center justify-between border p-6 shadow-lg">
+                    <div
+                        class="text-error-700 dark:text-error-400 flex items-center gap-4">
+                        <Trash2 size={24} />
                         <div>
-                            <p class="font-bold text-lg">Cache Management</p>
-                            <p class="text-xs opacity-70 font-mono italic uppercase tracking-tighter">Wipe IndexedDB (ae_core_db)</p>
+                            <p class="text-lg font-bold">Cache Management</p>
+                            <p
+                                class="font-mono text-xs tracking-tighter uppercase italic opacity-70">
+                                Wipe IndexedDB (ae_core_db)
+                            </p>
                         </div>
                     </div>
-                    <button class="btn variant-filled-error p-4 font-bold shadow-lg transition-all hover:scale-105" onclick={clear_local_cache}>CLEAR LOCAL IDB</button>
+                    <button
+                        class="btn variant-filled-error p-4 font-bold shadow-lg transition-all hover:scale-105"
+                        onclick={clear_local_cache}>CLEAR LOCAL IDB</button>
                 </div>
             </main>
 
             <aside class="space-y-4">
-                <div class="card p-6 h-full bg-surface-100 dark:bg-surface-800 overflow-hidden flex flex-col sticky top-4 max-h-[calc(100vh-2rem)] shadow-2xl border border-gray-500">
-                    <header class="flex justify-between items-center border-b border-gray-500 pb-3 mb-4">
-                        <h3 class="h3 font-bold uppercase tracking-widest opacity-70">Audit Result</h3>
-                        {#if test_result === 'loading...'} <span class="badge variant-filled-warning animate-pulse">RUNNING</span>
-                        {:else if test_result?.success} <span class="badge variant-filled-success font-bold uppercase">Passed</span>
-                        {:else if test_result?.error || (test_result && !test_result.success)} <span class="badge variant-filled-error font-bold italic uppercase">Failed</span>
-                        {:else} <span class="badge variant-soft-surface opacity-50 italic uppercase">Idle</span> {/if}
-                    </header>
-                    <div class="flex-1 overflow-auto bg-black/20 rounded p-4 font-mono text-xs shadow-inner border border-black/10">
+                <div
+                    class="card bg-surface-100 dark:bg-surface-800 sticky top-4 flex h-full max-h-[calc(100vh-2rem)] flex-col overflow-hidden border border-gray-500 p-6 shadow-2xl">
+                    <header
+                        class="mb-4 flex items-center justify-between border-b border-gray-500 pb-3">
+                        <h3
+                            class="h3 font-bold tracking-widest uppercase opacity-70">
+                            Audit Result
+                        </h3>
                         {#if test_result === 'loading...'}
-                            <div class="flex flex-col items-center justify-center h-full gap-4 opacity-30"><RefreshCcw size={32} class="animate-spin"/><p class="italic uppercase">Auditing...</p></div>
-                        {:else if test_result}
-                            <pre class="whitespace-pre-wrap leading-relaxed text-blue-600 dark:text-blue-400">{JSON.stringify(test_result, null, 2)}</pre>
+                            <span
+                                class="badge variant-filled-warning animate-pulse"
+                                >RUNNING</span>
+                        {:else if test_result?.success}
+                            <span
+                                class="badge variant-filled-success font-bold uppercase"
+                                >Passed</span>
+                        {:else if test_result?.error || (test_result && !test_result.success)}
+                            <span
+                                class="badge variant-filled-error font-bold uppercase italic"
+                                >Failed</span>
                         {:else}
-                            <div class="flex flex-col items-center justify-center h-full opacity-20 py-20 text-center"><Zap size={64} class="mb-4" /><p class="font-bold uppercase tracking-widest">Select test to begin</p></div>
+                            <span
+                                class="badge variant-soft-surface uppercase italic opacity-50"
+                                >Idle</span>
+                        {/if}
+                    </header>
+                    <div
+                        class="flex-1 overflow-auto rounded border border-black/10 bg-black/20 p-4 font-mono text-xs shadow-inner">
+                        {#if test_result === 'loading...'}
+                            <div
+                                class="flex h-full flex-col items-center justify-center gap-4 opacity-30">
+                                <RefreshCcw size={32} class="animate-spin" />
+                                <p class="uppercase italic">Auditing...</p>
+                            </div>
+                        {:else if test_result}
+                            <pre
+                                class="leading-relaxed whitespace-pre-wrap text-blue-600 dark:text-blue-400">{JSON.stringify(
+                                    test_result,
+                                    null,
+                                    2
+                                )}</pre>
+                        {:else}
+                            <div
+                                class="flex h-full flex-col items-center justify-center py-20 text-center opacity-20">
+                                <Zap size={64} class="mb-4" />
+                                <p class="font-bold tracking-widest uppercase">
+                                    Select test to begin
+                                </p>
+                            </div>
                         {/if}
                     </div>
                 </div>
@@ -568,8 +940,20 @@
 </div>
 
 <style lang="postcss">
-    /* No @apply on Skeleton tokens to prevent Tailwind 4 errors */
-    .checkbox { width: 1.25rem; height: 1.25rem; cursor: pointer; }
-    .radio { width: 1.15rem; height: 1.15rem; cursor: pointer; }
-    .btn:disabled { opacity: 0.3; filter: saturate(0); cursor: not-allowed; }
-</style>
\ No newline at end of file
+/* No @apply on Skeleton tokens to prevent Tailwind 4 errors */
+.checkbox {
+    width: 1.25rem;
+    height: 1.25rem;
+    cursor: pointer;
+}
+.radio {
+    width: 1.15rem;
+    height: 1.15rem;
+    cursor: pointer;
+}
+.btn:disabled {
+    opacity: 0.3;
+    filter: saturate(0);
+    cursor: not-allowed;
+}
+</style>
diff --git a/src/routes/testing/ae_obj_field_editor/+page.svelte b/src/routes/testing/ae_obj_field_editor/+page.svelte
index cb0e6971..03e0f236 100644
--- a/src/routes/testing/ae_obj_field_editor/+page.svelte
+++ b/src/routes/testing/ae_obj_field_editor/+page.svelte
@@ -1,85 +1,100 @@
 <script lang="ts">
-    import AE_Obj_Field_Editor_V3 from '$lib/elements/element_ae_obj_field_editor.svelte';
-    import { ae_loc, ae_api } from '$lib/stores/ae_stores';
-    import { liveQuery } from 'dexie';
-    import { db_journals } from '$lib/ae_journals/db_journals';
-    import { load_ae_obj_id__journal } from '$lib/ae_journals/ae_journals__journal';
-    import { load_ae_obj_id__journal_entry } from '$lib/ae_journals/ae_journals__journal_entry';
-    import { Database, FileText, LoaderCircle, RefreshCw } from '@lucide/svelte';
-    import { onMount } from 'svelte';
+import AE_Obj_Field_Editor_V3 from '$lib/elements/element_ae_obj_field_editor.svelte';
+import { ae_loc, ae_api } from '$lib/stores/ae_stores';
+import { liveQuery } from 'dexie';
+import { db_journals } from '$lib/ae_journals/db_journals';
+import { load_ae_obj_id__journal } from '$lib/ae_journals/ae_journals__journal';
+import { load_ae_obj_id__journal_entry } from '$lib/ae_journals/ae_journals__journal_entry';
+import { Database, FileText, LoaderCircle, RefreshCw } from '@lucide/svelte';
+import { onMount } from 'svelte';
 
-    let log_lvl = $state(1);
+let log_lvl = $state(1);
 
-    // Provided Test IDs
-    let test_journal_id = $state('SWFK-48-89-90'); // 'BVYE-94-46-29'
-    let test_journal_entry_id = $state('xRx-Y4-h3-fU');
+// Provided Test IDs
+let test_journal_id = $state('SWFK-48-89-90'); // 'BVYE-94-46-29'
+let test_journal_entry_id = $state('xRx-Y4-h3-fU');
 
-    // Fetch objects from API on mount to ensure local DB is populated
-    onMount(async () => {
-        if (log_lvl) console.log('Test Page: Initializing data from server...');
-        try {
-            await Promise.all([
-                load_ae_obj_id__journal({
-                    api_cfg: $ae_api,
-                    journal_id: test_journal_id,
-                    log_lvl
-                }),
-                load_ae_obj_id__journal_entry({
-                    api_cfg: $ae_api,
-                    journal_entry_id: test_journal_entry_id,
-                    log_lvl
-                })
-            ]);
-        } catch (e) {
-            console.error('Test Page: Error loading initial data', e);
-        }
-    });
-
-    // Dexie LiveQueries
-    let lq__test_journal = $derived(
-        liveQuery(async () => {
-            return await db_journals.journal.get(test_journal_id);
-        })
-    );
-
-    let lq__test_journal_entry = $derived(
-        liveQuery(async () => {
-            return await db_journals.journal_entry.get(test_journal_entry_id);
-        })
-    );
-
-    function handle_success(data: any) {
-        console.log('Test Page: Patch Success!', data);
+// Fetch objects from API on mount to ensure local DB is populated
+onMount(async () => {
+    if (log_lvl) console.log('Test Page: Initializing data from server...');
+    try {
+        await Promise.all([
+            load_ae_obj_id__journal({
+                api_cfg: $ae_api,
+                journal_id: test_journal_id,
+                log_lvl
+            }),
+            load_ae_obj_id__journal_entry({
+                api_cfg: $ae_api,
+                journal_entry_id: test_journal_entry_id,
+                log_lvl
+            })
+        ]);
+    } catch (e) {
+        console.error('Test Page: Error loading initial data', e);
     }
+});
+
+// Dexie LiveQueries
+let lq__test_journal = $derived(
+    liveQuery(async () => {
+        return await db_journals.journal.get(test_journal_id);
+    })
+);
+
+let lq__test_journal_entry = $derived(
+    liveQuery(async () => {
+        return await db_journals.journal_entry.get(test_journal_entry_id);
+    })
+);
+
+function handle_success(data: any) {
+    console.log('Test Page: Patch Success!', data);
+}
 </script>
 
-<div class="p-8 space-y-8 max-w-6xl mx-auto h-full overflow-y-auto">
-    <header class="border-b border-surface-500/30 pb-4 flex justify-between items-center">
+<div class="mx-auto h-full max-w-6xl space-y-8 overflow-y-auto p-8">
+    <header
+        class="border-surface-500/30 flex items-center justify-between border-b pb-4">
         <div>
             <h1 class="h1">AE Obj Field Editor V3 Test</h1>
-            <p class="opacity-70 font-mono text-xs">IDs: Journal={test_journal_id} | Entry={test_journal_entry_id}</p>
+            <p class="font-mono text-xs opacity-70">
+                IDs: Journal={test_journal_id} | Entry={test_journal_entry_id}
+            </p>
         </div>
         <div class="flex items-center gap-4">
-            <label class="flex items-center gap-2 cursor-pointer bg-surface-200 dark:bg-surface-800 px-3 py-1.5 rounded-full shadow-inner">
-                <span class="text-xs font-bold uppercase opacity-70">Edit Mode</span>
-                <input type="checkbox" bind:checked={$ae_loc.edit_mode} class="checkbox" />
+            <label
+                class="bg-surface-200 dark:bg-surface-800 flex cursor-pointer items-center gap-2 rounded-full px-3 py-1.5 shadow-inner">
+                <span class="text-xs font-bold uppercase opacity-70"
+                    >Edit Mode</span>
+                <input
+                    type="checkbox"
+                    bind:checked={$ae_loc.edit_mode}
+                    class="checkbox" />
             </label>
-            <button class="btn variant-filled-primary" onclick={() => window.location.reload()}>
+            <button
+                class="btn variant-filled-primary"
+                onclick={() => window.location.reload()}>
                 <RefreshCw size="1em" class="mr-2" /> Reload Page
             </button>
         </div>
     </header>
 
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-
+    <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
         <!-- COLUMN 1: JOURNAL TEST -->
         <div class="space-y-8">
-            <h2 class="h2 flex items-center gap-2"><Database /> Journal Properties</h2>
+            <h2 class="h2 flex items-center gap-2">
+                <Database /> Journal Properties
+            </h2>
 
             {#if $lq__test_journal}
-                <section class="card p-6 space-y-6 variant-soft-primary shadow-lg border border-primary-500/20">
+                <section
+                    class="card variant-soft-primary border-primary-500/20 space-y-6 border p-6 shadow-lg">
                     <div class="field_group">
-                        <label for="j_name" class="label text-xs font-bold opacity-50 mb-1 uppercase tracking-tighter">Journal Name</label>
+                        <label
+                            for="j_name"
+                            class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
+                            >Journal Name</label>
                         <AE_Obj_Field_Editor_V3
                             id="j_name"
                             object_type="journal"
@@ -88,12 +103,14 @@
                             bind:current_value={$lq__test_journal.name}
                             field_type="text"
                             {log_lvl}
-                            on_success={handle_success}
-                        />
+                            on_success={handle_success} />
                     </div>
 
                     <div class="field_group">
-                        <label for="j_type" class="label text-xs font-bold opacity-50 mb-1 uppercase tracking-tighter">Type Code</label>
+                        <label
+                            for="j_type"
+                            class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
+                            >Type Code</label>
                         <AE_Obj_Field_Editor_V3
                             id="j_type"
                             object_type="journal"
@@ -102,17 +119,19 @@
                             bind:current_value={$lq__test_journal.type_code}
                             field_type="select"
                             select_options={{
-                                'personal': 'Personal Journal',
-                                'work': 'Work Log',
-                                'shared': 'Shared Notes',
-                                'ai_brain': 'AI Context'
+                                personal: 'Personal Journal',
+                                work: 'Work Log',
+                                shared: 'Shared Notes',
+                                ai_brain: 'AI Context'
                             }}
-                            {log_lvl}
-                        />
+                            {log_lvl} />
                     </div>
 
                     <div class="field_group">
-                        <label for="j_summary" class="label text-xs font-bold opacity-50 mb-1 uppercase tracking-tighter">Summary</label>
+                        <label
+                            for="j_summary"
+                            class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
+                            >Summary</label>
                         <AE_Obj_Field_Editor_V3
                             id="j_summary"
                             object_type="journal"
@@ -121,26 +140,34 @@
                             bind:current_value={$lq__test_journal.summary}
                             field_type="textarea"
                             display_block={true}
-                            {log_lvl}
-                        />
+                            {log_lvl} />
                     </div>
                 </section>
             {:else}
-                <div class="card p-10 flex flex-col items-center justify-center opacity-50 gap-4 variant-soft-surface">
+                <div
+                    class="card variant-soft-surface flex flex-col items-center justify-center gap-4 p-10 opacity-50">
                     <LoaderCircle size="32" class="animate-spin" />
-                    <p class="text-sm font-bold">Loading Journal {test_journal_id}...</p>
+                    <p class="text-sm font-bold">
+                        Loading Journal {test_journal_id}...
+                    </p>
                 </div>
             {/if}
         </div>
 
         <!-- COLUMN 2: JOURNAL ENTRY TEST -->
         <div class="space-y-8">
-            <h2 class="h2 flex items-center gap-2"><FileText /> Journal Entry Properties</h2>
+            <h2 class="h2 flex items-center gap-2">
+                <FileText /> Journal Entry Properties
+            </h2>
 
             {#if $lq__test_journal_entry}
-                <section class="card p-6 space-y-6 variant-soft-secondary shadow-lg border border-secondary-500/20">
+                <section
+                    class="card variant-soft-secondary border-secondary-500/20 space-y-6 border p-6 shadow-lg">
                     <div class="field_group">
-                        <label for="e_name" class="label text-xs font-bold opacity-50 mb-1 uppercase tracking-tighter">Entry Title</label>
+                        <label
+                            for="e_name"
+                            class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
+                            >Entry Title</label>
                         <AE_Obj_Field_Editor_V3
                             id="e_name"
                             object_type="journal_entry"
@@ -148,39 +175,49 @@
                             field_name="name"
                             bind:current_value={$lq__test_journal_entry.name}
                             field_type="text"
-                            {log_lvl}
-                        />
+                            {log_lvl} />
                     </div>
 
                     <div class="grid grid-cols-2 gap-4">
                         <div class="field_group">
-                            <label for="e_enabled" class="label text-xs font-bold opacity-50 mb-1 uppercase tracking-tighter">Status</label>
+                            <label
+                                for="e_enabled"
+                                class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
+                                >Status</label>
                             <AE_Obj_Field_Editor_V3
                                 id="e_enabled"
                                 object_type="journal_entry"
                                 object_id={test_journal_entry_id}
                                 field_name="enable"
-                                bind:current_value={$lq__test_journal_entry.enable}
+                                bind:current_value={
+                                    $lq__test_journal_entry.enable
+                                }
                                 field_type="checkbox"
-                                {log_lvl}
-                            />
+                                {log_lvl} />
                         </div>
                         <div class="field_group">
-                            <label for="e_priority" class="label text-xs font-bold opacity-50 mb-1 uppercase tracking-tighter">Priority</label>
+                            <label
+                                for="e_priority"
+                                class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
+                                >Priority</label>
                             <AE_Obj_Field_Editor_V3
                                 id="e_priority"
                                 object_type="journal_entry"
                                 object_id={test_journal_entry_id}
                                 field_name="priority"
-                                bind:current_value={$lq__test_journal_entry.priority}
+                                bind:current_value={
+                                    $lq__test_journal_entry.priority
+                                }
                                 field_type="checkbox"
-                                {log_lvl}
-                            />
+                                {log_lvl} />
                         </div>
                     </div>
 
                     <div class="field_group">
-                        <p class="label text-xs font-bold opacity-50 mb-1 uppercase tracking-tighter">Content (TipTap)</p>
+                        <p
+                            class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50">
+                            Content (TipTap)
+                        </p>
                         <AE_Obj_Field_Editor_V3
                             object_type="journal_entry"
                             object_id={test_journal_entry_id}
@@ -188,34 +225,40 @@
                             bind:current_value={$lq__test_journal_entry.content}
                             field_type="tiptap"
                             display_block={true}
-                            {log_lvl}
-                        />
+                            {log_lvl} />
                     </div>
                 </section>
             {:else}
-                <div class="card p-10 flex flex-col items-center justify-center opacity-50 gap-4 variant-soft-surface">
+                <div
+                    class="card variant-soft-surface flex flex-col items-center justify-center gap-4 p-10 opacity-50">
                     <LoaderCircle size="32" class="animate-spin" />
-                    <p class="text-sm font-bold">Loading Entry {test_journal_entry_id}...</p>
+                    <p class="text-sm font-bold">
+                        Loading Entry {test_journal_entry_id}...
+                    </p>
                 </div>
             {/if}
         </div>
     </div>
 
     <!-- DEBUG FOOTER -->
-    <section class="card p-4 space-y-4">
+    <section class="card space-y-4 p-4">
         <h2 class="h3">Debug Context</h2>
-        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 text-xs font-mono">
-            <div class="bg-surface-900 text-success-500 p-2 rounded">
-                <strong>Edit Mode:</strong> {$ae_loc.edit_mode}
+        <div class="grid grid-cols-2 gap-4 font-mono text-xs lg:grid-cols-4">
+            <div class="bg-surface-900 text-success-500 rounded p-2">
+                <strong>Edit Mode:</strong>
+                {$ae_loc.edit_mode}
             </div>
-            <div class="bg-surface-900 text-success-500 p-2 rounded">
-                <strong>Account ID:</strong> {$ae_loc.account_id}
+            <div class="bg-surface-900 text-success-500 rounded p-2">
+                <strong>Account ID:</strong>
+                {$ae_loc.account_id}
             </div>
-            <div class="bg-surface-900 text-success-500 p-2 rounded">
-                <strong>Journal Status:</strong> {$lq__test_journal ? 'Cached' : 'Pending'}
+            <div class="bg-surface-900 text-success-500 rounded p-2">
+                <strong>Journal Status:</strong>
+                {$lq__test_journal ? 'Cached' : 'Pending'}
             </div>
-            <div class="bg-surface-900 text-success-500 p-2 rounded">
-                <strong>Entry Status:</strong> {$lq__test_journal_entry ? 'Cached' : 'Pending'}
+            <div class="bg-surface-900 text-success-500 rounded p-2">
+                <strong>Entry Status:</strong>
+                {$lq__test_journal_entry ? 'Cached' : 'Pending'}
             </div>
         </div>
     </section>
diff --git a/src/routes/testing/data_store/+page.svelte b/src/routes/testing/data_store/+page.svelte
index 3b8942b8..57d01aef 100644
--- a/src/routes/testing/data_store/+page.svelte
+++ b/src/routes/testing/data_store/+page.svelte
@@ -1,122 +1,141 @@
 <script lang="ts">
-    import AE_Element_Data_Store from '$lib/elements/element_data_store.svelte';
-    import { ae_loc } from '$lib/stores/ae_stores';
-    import { db_core } from '$lib/ae_core/db_core';
-    import { RefreshCw, Trash2 } from '@lucide/svelte';
-    // let test_code_global = 'hub__site__root_page_header'; // Expected to be a global default
-    // let test_name_global = 'Global Header Test - hub__site__root_page_header';
-    // let test_code_account = 'hub__site__root_page_header';
-    // let test_name_account = 'Account Header Test - hub__site__root_page_header';
-    // let test_code_specific = 'event_launcher_main_info';
-    // let test_name_specific = 'Event Specific Test - event_launcher_main_info';
+import AE_Element_Data_Store from '$lib/elements/element_data_store.svelte';
+import { ae_loc } from '$lib/stores/ae_stores';
+import { db_core } from '$lib/ae_core/db_core';
+import { RefreshCw, Trash2 } from '@lucide/svelte';
+// let test_code_global = 'hub__site__root_page_header'; // Expected to be a global default
+// let test_name_global = 'Global Header Test - hub__site__root_page_header';
+// let test_code_account = 'hub__site__root_page_header';
+// let test_name_account = 'Account Header Test - hub__site__root_page_header';
+// let test_code_specific = 'event_launcher_main_info';
+// let test_name_specific = 'Event Specific Test - event_launcher_main_info';
 
+let test_null_act_and_for = 'events__leads__overview'; // Expecting the Global Default
+let test_code_account = 'hub__site__root_page_header'; // Expecting the Account Default
+let test_code_and_for = 'event_launcher_main_info'; // Expecting the Specific Record (Event ID)
+let testing_event_id = 'pjrcghqwert'; // Per README test data
 
-    let test_null_act_and_for = 'events__leads__overview'; // Expecting the Global Default
-    let test_code_account = 'hub__site__root_page_header'; // Expecting the Account Default
-    let test_code_and_for = 'event_launcher_main_info'; // Expecting the Specific Record (Event ID)
-    let testing_event_id = 'pjrcghqwert'; // Per README test data
+let log_lvl = $state(0);
+let refresh_trigger = $state(0);
 
+async function clear_cache() {
+    if (log_lvl) console.log('Asking to confirm clearing Data Store cache...');
 
-    let log_lvl = $state(0);
-    let refresh_trigger = $state(0);
-
-    async function clear_cache() {
-        if (log_lvl) console.log('Asking to confirm clearing Data Store cache...');
-
-        if (confirm('Are you sure you want to clear the local Data Store cache?')) {
-            await db_core.data_store.clear();
-            refresh_trigger++;
-            alert('Cache cleared.');
-        }
+    if (confirm('Are you sure you want to clear the local Data Store cache?')) {
+        await db_core.data_store.clear();
+        refresh_trigger++;
+        alert('Cache cleared.');
     }
+}
 </script>
 
-<div class="p-8 space-y-8 max-w-4xl mx-auto h-full overflow-y-auto">
-    <header class="border-b border-surface-500/30 pb-4 flex justify-between items-center">
+<div class="mx-auto h-full max-w-4xl space-y-8 overflow-y-auto p-8">
+    <header
+        class="border-surface-500/30 flex items-center justify-between border-b pb-4">
         <div>
             <h1 class="h1">Data Store V3 Test Page</h1>
-            <p class="opacity-70">Testing cascading lookup: Specific &rarr; Account &rarr; Global</p>
+            <p class="opacity-70">
+                Testing cascading lookup: Specific &rarr; Account &rarr; Global
+            </p>
         </div>
         <div class="flex gap-2">
             <button class="btn variant-filled-warning" onclick={clear_cache}>
                 <Trash2 size="1em" class="mr-2" /> Clear Cache
             </button>
-            <button class="btn variant-filled-primary" onclick={() => refresh_trigger++}>
+            <button
+                class="btn variant-filled-primary"
+                onclick={() => refresh_trigger++}>
                 <RefreshCw size="1em" class="mr-2" /> Force Refresh
             </button>
         </div>
     </header>
 
     {#key refresh_trigger}
-    <section class="card p-4 space-y-4 variant-soft-primary">
-        <h2 class="h3">Scenario 1: Global Default</h2>
-        <p class="text-sm">Fetching code <code>{test_null_act_and_for}</code>. Should fall back to <code>account_id = NULL</code> if not found for account.</p>
-        <div class="bg-surface-100 dark:bg-surface-800 p-4 rounded-lg border border-surface-500/20">
-            <AE_Element_Data_Store
-                ds_code={test_null_act_and_for}
-                ds_name={'Global Default Test'}
-                {log_lvl}
-                debug={true}
-            />
-        </div>
-    </section>
+        <section class="card variant-soft-primary space-y-4 p-4">
+            <h2 class="h3">Scenario 1: Global Default</h2>
+            <p class="text-sm">
+                Fetching code <code>{test_null_act_and_for}</code>. Should fall
+                back to <code>account_id = NULL</code> if not found for account.
+            </p>
+            <div
+                class="bg-surface-100 dark:bg-surface-800 border-surface-500/20 rounded-lg border p-4">
+                <AE_Element_Data_Store
+                    ds_code={test_null_act_and_for}
+                    ds_name={'Global Default Test'}
+                    {log_lvl}
+                    debug={true} />
+            </div>
+        </section>
 
-    <section class="card p-4 space-y-4 variant-soft-secondary">
-        <h2 class="h3">Scenario 2: Account Default</h2>
-        <p class="text-sm">Fetching code <code>{test_code_account}</code> for Account ID: <code>{$ae_loc.account_id}</code>.</p>
-        <div class="bg-surface-100 dark:bg-surface-800 p-4 rounded-lg border border-surface-500/20">
-            <AE_Element_Data_Store
-                ds_code={test_code_account}
-                ds_name={'Account Default Test'}
-                {log_lvl}
-                debug={true}
-            />
-        </div>
-    </section>
+        <section class="card variant-soft-secondary space-y-4 p-4">
+            <h2 class="h3">Scenario 2: Account Default</h2>
+            <p class="text-sm">
+                Fetching code <code>{test_code_account}</code> for Account ID:
+                <code>{$ae_loc.account_id}</code>.
+            </p>
+            <div
+                class="bg-surface-100 dark:bg-surface-800 border-surface-500/20 rounded-lg border p-4">
+                <AE_Element_Data_Store
+                    ds_code={test_code_account}
+                    ds_name={'Account Default Test'}
+                    {log_lvl}
+                    debug={true} />
+            </div>
+        </section>
 
-    <section class="card p-4 space-y-4 variant-soft-tertiary">
-        <h2 class="h3">Scenario 3: Specific Record (Event Override)</h2>
-        <p class="text-sm">Fetching code <code>{test_code_and_for}</code> linked to <code>for_type: event</code> and <code>for_id: {testing_event_id}</code>.</p>
-        <div class="bg-surface-100 dark:bg-surface-800 p-4 rounded-lg border border-surface-500/20">
-            <AE_Element_Data_Store
-                ds_code={test_code_and_for}
-                ds_name={'Specific Record Test'}
-                for_type="event"
-                for_id={testing_event_id}
-                {log_lvl}
-                debug={true}
-            />
-        </div>
-    </section>
+        <section class="card variant-soft-tertiary space-y-4 p-4">
+            <h2 class="h3">Scenario 3: Specific Record (Event Override)</h2>
+            <p class="text-sm">
+                Fetching code <code>{test_code_and_for}</code> linked to
+                <code>for_type: event</code>
+                and <code>for_id: {testing_event_id}</code>.
+            </p>
+            <div
+                class="bg-surface-100 dark:bg-surface-800 border-surface-500/20 rounded-lg border p-4">
+                <AE_Element_Data_Store
+                    ds_code={test_code_and_for}
+                    ds_name={'Specific Record Test'}
+                    for_type="event"
+                    for_id={testing_event_id}
+                    {log_lvl}
+                    debug={true} />
+            </div>
+        </section>
 
-    <section class="card p-4 space-y-4 variant-soft-tertiary">
-        <h2 class="h3">Scenario 4: Change Props Passed</h2>
-        <p class="text-sm">Fetching code <code>{test_code_and_for}</code> linked to <code>for_type: event</code> and <code>for_id: {testing_event_id}</code>.</p>
-        <div class="bg-surface-100 dark:bg-surface-800 p-4 rounded-lg border border-surface-500/20">
-            <AE_Element_Data_Store
-                ds_code={test_code_and_for}
-                ds_name={'Specific Record Test'}
-                ds_type="html"
-                for_type="event"
-                for_id={testing_event_id}
-                class_li="w-fit max-w-(--breakpoint-lg) text-xl text-red-500 font-bold text-center p-1 m-1 border border-red-200 rounded-md bg-red-100"
-                show_edit={false}
-                show_edit_btn={true}
-                {log_lvl}
-                debug={true}
-            />
-        </div>
-    </section>
+        <section class="card variant-soft-tertiary space-y-4 p-4">
+            <h2 class="h3">Scenario 4: Change Props Passed</h2>
+            <p class="text-sm">
+                Fetching code <code>{test_code_and_for}</code> linked to
+                <code>for_type: event</code>
+                and <code>for_id: {testing_event_id}</code>.
+            </p>
+            <div
+                class="bg-surface-100 dark:bg-surface-800 border-surface-500/20 rounded-lg border p-4">
+                <AE_Element_Data_Store
+                    ds_code={test_code_and_for}
+                    ds_name={'Specific Record Test'}
+                    ds_type="html"
+                    for_type="event"
+                    for_id={testing_event_id}
+                    class_li="w-fit max-w-(--breakpoint-lg) text-xl text-red-500 font-bold text-center p-1 m-1 border border-red-200 rounded-md bg-red-100"
+                    show_edit={false}
+                    show_edit_btn={true}
+                    {log_lvl}
+                    debug={true} />
+            </div>
+        </section>
     {/key}
 
-    <section class="card p-4 space-y-4">
+    <section class="card space-y-4 p-4">
         <h2 class="h3">Current Context</h2>
-        <div class="grid grid-cols-2 gap-4 text-xs font-mono">
-            <div class="bg-surface-900 text-success-500 p-2 rounded">
-                <strong>Account ID:</strong> {$ae_loc.account_id || 'NULL'}
+        <div class="grid grid-cols-2 gap-4 font-mono text-xs">
+            <div class="bg-surface-900 text-success-500 rounded p-2">
+                <strong>Account ID:</strong>
+                {$ae_loc.account_id || 'NULL'}
             </div>
-            <div class="bg-surface-900 text-success-500 p-2 rounded">
-                <strong>Edit Mode:</strong> {$ae_loc.edit_mode}
+            <div class="bg-surface-900 text-success-500 rounded p-2">
+                <strong>Edit Mode:</strong>
+                {$ae_loc.edit_mode}
             </div>
         </div>
     </section>
diff --git a/src/routes/testing/editor_test/+page.svelte b/src/routes/testing/editor_test/+page.svelte
index eb1d6e8b..859e2215 100644
--- a/src/routes/testing/editor_test/+page.svelte
+++ b/src/routes/testing/editor_test/+page.svelte
@@ -1,20 +1,24 @@
 <script lang="ts">
-    import AE_Comp_Editor_TipTap from '$lib/elements/element_editor_tiptap.svelte';
-    import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
-    import { Code, Eye } from '@lucide/svelte';
-    let test_content = $state('<h2>Welcome to the Visual Editor Test</h2><p>This editor uses <strong>native browser rich text</strong> capabilities.</p><ul><li>No library conflicts</li><li>Uses existing <em>.tiptap</em> styles</li><li>Instant performance</li></ul>');
-    let log_lvl = 1;
+import AE_Comp_Editor_TipTap from '$lib/elements/element_editor_tiptap.svelte';
+import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
+import { Code, Eye } from '@lucide/svelte';
+let test_content = $state(
+    '<h2>Welcome to the Visual Editor Test</h2><p>This editor uses <strong>native browser rich text</strong> capabilities.</p><ul><li>No library conflicts</li><li>Uses existing <em>.tiptap</em> styles</li><li>Instant performance</li></ul>'
+);
+let log_lvl = 1;
 </script>
 
-<div class="p-8 space-y-8 max-w-5xl mx-auto h-full overflow-y-auto">
-    <header class="border-b border-surface-500/30 pb-4">
+<div class="mx-auto h-full max-w-5xl space-y-8 overflow-y-auto p-8">
+    <header class="border-surface-500/30 border-b pb-4">
         <h1 class="h1">Rich Text Editor Test</h1>
-        <p class="opacity-70">Testing the Zero-Dependency "TipTap" replacement.</p>
+        <p class="opacity-70">
+            Testing the Zero-Dependency "TipTap" replacement.
+        </p>
     </header>
 
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+    <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
         <!-- Visual Editor -->
-        <section class="card p-4 space-y-4 variant-soft-primary">
+        <section class="card variant-soft-primary space-y-4 p-4">
             <h2 class="h3 flex items-center gap-2">
                 <Eye size="1em" class="text-primary-500" />
                 Visual Editor (AE_Comp_Editor_TipTap)
@@ -22,30 +26,33 @@
             <div class="bg-surface-100 dark:bg-surface-800 rounded-lg">
                 <AE_Comp_Editor_TipTap
                     bind:content={test_content}
-                    placeholder="Try writing something pretty..."
-                />
+                    placeholder="Try writing something pretty..." />
             </div>
         </section>
 
         <!-- Source Code View -->
-        <section class="card p-4 space-y-4 variant-soft-tertiary">
+        <section class="card variant-soft-tertiary space-y-4 p-4">
             <h2 class="h3 flex items-center gap-2">
                 <Code size="1em" class="text-tertiary-500" />
                 Source View (AE_Comp_Editor_CodeMirror)
             </h2>
-            <div class="bg-surface-100 dark:bg-surface-800 rounded-lg h-[250px]">
+            <div
+                class="bg-surface-100 dark:bg-surface-800 h-[250px] rounded-lg">
                 <AE_Comp_Editor_CodeMirror
                     bind:content={test_content}
                     language="html"
-                    show_line_numbers={true}
-                />
+                    show_line_numbers={true} />
             </div>
         </section>
     </div>
 
     <!-- HTML Preview -->
-    <section class="card p-4 space-y-4 bg-surface-900 text-green-400 font-mono text-xs overflow-auto max-h-96 shadow-2xl border border-white/10">
-        <h2 class="text-sm font-bold opacity-50 uppercase tracking-widest border-b border-white/10 pb-2">Raw Bound Content (Saved to DB)</h2>
+    <section
+        class="card bg-surface-900 max-h-96 space-y-4 overflow-auto border border-white/10 p-4 font-mono text-xs text-green-400 shadow-2xl">
+        <h2
+            class="border-b border-white/10 pb-2 text-sm font-bold tracking-widest uppercase opacity-50">
+            Raw Bound Content (Saved to DB)
+        </h2>
         <pre class="whitespace-pre">{test_content}</pre>
     </section>
 </div>
diff --git a/src/routes/testing/fix-sw/+page.svelte b/src/routes/testing/fix-sw/+page.svelte
index 65844b4f..be54ed01 100644
--- a/src/routes/testing/fix-sw/+page.svelte
+++ b/src/routes/testing/fix-sw/+page.svelte
@@ -1,71 +1,76 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+import { onMount } from 'svelte';
 
-    let status: string[] = $state([]);
+let status: string[] = $state([]);
 
-    function log(msg: string) {
-        status = [...status, `${new Date().toLocaleTimeString()} - ${msg}`];
-        console.log(`[FIX-SW] ${msg}`);
+function log(msg: string) {
+    status = [...status, `${new Date().toLocaleTimeString()} - ${msg}`];
+    console.log(`[FIX-SW] ${msg}`);
+}
+
+async function nukeServiceWorkers() {
+    log('Starting Service Worker cleanup...');
+
+    if (!('serviceWorker' in navigator)) {
+        log('Service Workers not supported in this browser.');
+        return;
     }
 
-    async function nukeServiceWorkers() {
-        log('Starting Service Worker cleanup...');
+    try {
+        const registrations = await navigator.serviceWorker.getRegistrations();
+        log(`Found ${registrations.length} registrations.`);
 
-        if (!('serviceWorker' in navigator)) {
-            log('Service Workers not supported in this browser.');
-            return;
+        for (const registration of registrations) {
+            const scope = registration.scope;
+            log(`Unregistering SW at scope: ${scope}`);
+            const success = await registration.unregister();
+            log(`Unregister success: ${success}`);
         }
 
-        try {
-            const registrations = await navigator.serviceWorker.getRegistrations();
-            log(`Found ${registrations.length} registrations.`);
-
-            for (const registration of registrations) {
-                const scope = registration.scope;
-                log(`Unregistering SW at scope: ${scope}`);
-                const success = await registration.unregister();
-                log(`Unregister success: ${success}`);
-            }
-
-            if (registrations.length === 0) {
-                log('No active Service Workers found.');
-            }
-
-            log('Clearing Cache Storage...');
-            const cacheKeys = await caches.keys();
-            for (const key of cacheKeys) {
-                log(`Deleting cache: ${key}`);
-                await caches.delete(key);
-            }
-            log('Cache storage cleared.');
-
-            log('DONE. Please reload the application now.');
-
-        } catch (err: any) {
-            log(`ERROR: ${err.message}`);
-            console.error(err);
+        if (registrations.length === 0) {
+            log('No active Service Workers found.');
         }
+
+        log('Clearing Cache Storage...');
+        const cacheKeys = await caches.keys();
+        for (const key of cacheKeys) {
+            log(`Deleting cache: ${key}`);
+            await caches.delete(key);
+        }
+        log('Cache storage cleared.');
+
+        log('DONE. Please reload the application now.');
+    } catch (err: any) {
+        log(`ERROR: ${err.message}`);
+        console.error(err);
     }
+}
 
-    onMount(() => {
-        nukeServiceWorkers();
-    });
+onMount(() => {
+    nukeServiceWorkers();
+});
 </script>
 
-<div class="p-8 max-w-2xl mx-auto font-mono">
-    <h1 class="text-2xl font-bold mb-4 text-red-600">Service Worker Reset Tool</h1>
-    <p class="mb-4">Attempting to unregister all service workers and clear caches to fix the TypeError loop.</p>
+<div class="mx-auto max-w-2xl p-8 font-mono">
+    <h1 class="mb-4 text-2xl font-bold text-red-600">
+        Service Worker Reset Tool
+    </h1>
+    <p class="mb-4">
+        Attempting to unregister all service workers and clear caches to fix the
+        TypeError loop.
+    </p>
 
-    <div class="bg-gray-100 p-4 rounded border border-gray-300 min-h-[200px]">
+    <div class="min-h-[200px] rounded border border-gray-300 bg-gray-100 p-4">
         {#each status as line, i (i)}
-            <div class="border-b border-gray-200 last:border-0 py-1">{line}</div>
+            <div class="border-b border-gray-200 py-1 last:border-0">
+                {line}
+            </div>
         {/each}
     </div>
 
     <button
-        class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-        onclick={() => window.location.reload()}
-    >
+        class="mt-4 rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
+        onclick={() => window.location.reload()}>
         Reload Page
     </button>
 </div>
diff --git a/src/routes/testing/hosted_files/+page.svelte b/src/routes/testing/hosted_files/+page.svelte
index 6c75d395..a6393246 100644
--- a/src/routes/testing/hosted_files/+page.svelte
+++ b/src/routes/testing/hosted_files/+page.svelte
@@ -1,128 +1,151 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { ae_api, ae_loc } from '$lib/stores/ae_stores';
-    import { load_ae_obj_id__hosted_file } from '$lib/ae_core/core__hosted_files';
-    import AE_Comp_Hosted_Files_Download_Button from '$lib/ae_core/ae_comp__hosted_files_download_button.svelte';
-    import * as Lucide from 'lucide-svelte';
+import { onMount } from 'svelte';
+import { ae_api, ae_loc } from '$lib/stores/ae_stores';
+import { load_ae_obj_id__hosted_file } from '$lib/ae_core/core__hosted_files';
+import AE_Comp_Hosted_Files_Download_Button from '$lib/ae_core/ae_comp__hosted_files_download_button.svelte';
+import * as Lucide from 'lucide-svelte';
 
-    let hosted_files: any[] = $state([]);
-    let large_file_obj: any = $state(null);
-    let loading = $state(true);
+let hosted_files: any[] = $state([]);
+let large_file_obj: any = $state(null);
+let loading = $state(true);
 
-    // Testing Toggles
-    let test_direct_download = $state(false);
+// Testing Toggles
+let test_direct_download = $state(false);
 
-    const LARGE_FILE_ID = 'sPw1he_RGCW';
-    const test_ids = [
-        'QpyZNtEb2LQBmNJPQU_aOA', // small.mp4
-        'ZmMTrrqx8nTTY0Cj0wvA3Q', // Test PowerPoint video.pptx
-        'e7NcV-275YPLQLoFMWuUZw', // Test PDF.pdf
-        'INVALID_ID_TEST'
-    ];
+const LARGE_FILE_ID = 'sPw1he_RGCW';
+const test_ids = [
+    'QpyZNtEb2LQBmNJPQU_aOA', // small.mp4
+    'ZmMTrrqx8nTTY0Cj0wvA3Q', // Test PowerPoint video.pptx
+    'e7NcV-275YPLQLoFMWuUZw', // Test PDF.pdf
+    'INVALID_ID_TEST'
+];
 
-    onMount(async () => {
-        // Load the large file specifically first
-        large_file_obj = await load_ae_obj_id__hosted_file({
-            api_cfg: $ae_api,
-            hosted_file_id: LARGE_FILE_ID,
-            log_lvl: 1
-        });
-
-        // Fallback for large file if API doesn't have it (for UI testing)
-        if (!large_file_obj) {
-            large_file_obj = {
-                id: LARGE_FILE_ID,
-                hosted_file_id: LARGE_FILE_ID,
-                filename: 'Large_Test_File_Fallback.zip',
-                extension: 'zip',
-                hash_sha256: 'pending...'
-            };
-        }
-
-        const promises = test_ids.map(id =>
-            load_ae_obj_id__hosted_file({
-                api_cfg: $ae_api,
-                hosted_file_id: id,
-                log_lvl: 1
-            })
-        );
-
-        const results = await Promise.all(promises);
-        hosted_files = results.filter((f: any) => f !== null) as any[];
-
-        // Add a fake object for the invalid ID test
-        hosted_files.push({
-            id: 'INVALID_ID_TEST',
-            hosted_file_id: 'INVALID_ID_TEST',
-            filename: 'non_existent_file.txt',
-            extension: 'txt',
-            hash_sha256: '0000000000'
-        });
-
-        loading = false;
+onMount(async () => {
+    // Load the large file specifically first
+    large_file_obj = await load_ae_obj_id__hosted_file({
+        api_cfg: $ae_api,
+        hosted_file_id: LARGE_FILE_ID,
+        log_lvl: 1
     });
 
+    // Fallback for large file if API doesn't have it (for UI testing)
+    if (!large_file_obj) {
+        large_file_obj = {
+            id: LARGE_FILE_ID,
+            hosted_file_id: LARGE_FILE_ID,
+            filename: 'Large_Test_File_Fallback.zip',
+            extension: 'zip',
+            hash_sha256: 'pending...'
+        };
+    }
+
+    const promises = test_ids.map((id) =>
+        load_ae_obj_id__hosted_file({
+            api_cfg: $ae_api,
+            hosted_file_id: id,
+            log_lvl: 1
+        })
+    );
+
+    const results = await Promise.all(promises);
+    hosted_files = results.filter((f: any) => f !== null) as any[];
+
+    // Add a fake object for the invalid ID test
+    hosted_files.push({
+        id: 'INVALID_ID_TEST',
+        hosted_file_id: 'INVALID_ID_TEST',
+        filename: 'non_existent_file.txt',
+        extension: 'txt',
+        hash_sha256: '0000000000'
+    });
+
+    loading = false;
+});
 </script>
 
 <!-- Outer wrapper to enable scrolling if parent is overflow-hidden -->
-<div class="h-full w-full overflow-y-auto overflow-x-hidden bg-transparent">
-    <div class="container mx-auto p-4 space-y-8 pb-20">
-        <header class="flex flex-col md:flex-row justify-between items-start md:items-center bg-surface-50-900-token p-6 rounded-container shadow-xl border border-gray-500 gap-4">
+<div class="h-full w-full overflow-x-hidden overflow-y-auto bg-transparent">
+    <div class="container mx-auto space-y-8 p-4 pb-20">
+        <header
+            class="bg-surface-50-900-token rounded-container flex flex-col items-start justify-between gap-4 border border-gray-500 p-6 shadow-xl md:flex-row md:items-center">
             <div class="space-y-1">
                 <h1 class="h1 flex items-center gap-3">
                     <Lucide.Download class="text-primary-500" /> Hosted Files Testing
                 </h1>
-                <p class="opacity-60 text-sm">Testing the AE_Comp_Hosted_Files_Download_Button component</p>
+                <p class="text-sm opacity-60">
+                    Testing the AE_Comp_Hosted_Files_Download_Button component
+                </p>
             </div>
 
-            <div class="flex flex-wrap gap-3 items-center bg-black/20 p-3 rounded-lg border border-white/10">
-                <div class="flex items-center gap-2 pr-3 border-r border-white/10">
-                    <span class="text-[10px] font-bold uppercase opacity-50">Edit Mode</span>
-                    <span class="badge {$ae_loc.edit_mode ? 'variant-filled-success' : 'variant-filled-surface'}">
+            <div
+                class="flex flex-wrap items-center gap-3 rounded-lg border border-white/10 bg-black/20 p-3">
+                <div
+                    class="flex items-center gap-2 border-r border-white/10 pr-3">
+                    <span class="text-[10px] font-bold uppercase opacity-50"
+                        >Edit Mode</span>
+                    <span
+                        class="badge {$ae_loc.edit_mode
+                            ? 'variant-filled-success'
+                            : 'variant-filled-surface'}">
                         {$ae_loc.edit_mode ? 'ON' : 'OFF'}
                     </span>
                 </div>
 
                 <div class="flex items-center gap-3">
-                    <span class="text-[10px] font-bold uppercase opacity-50">Direct Download</span>
+                    <span class="text-[10px] font-bold uppercase opacity-50"
+                        >Direct Download</span>
                     <button
-                        class="btn btn-sm {test_direct_download ? 'variant-filled-primary' : 'variant-soft-surface'}"
-                        onclick={() => test_direct_download = !test_direct_download}
-                    >
-                        {test_direct_download ? 'Anchor Mode (<a>)' : 'Action Mode (<button>)'}
+                        class="btn btn-sm {test_direct_download
+                            ? 'variant-filled-primary'
+                            : 'variant-soft-surface'}"
+                        onclick={() =>
+                            (test_direct_download = !test_direct_download)}>
+                        {test_direct_download
+                            ? 'Anchor Mode (<a>)'
+                            : 'Action Mode (<button>)'}
                     </button>
                 </div>
             </div>
         </header>
 
         <!-- Dedicated Large File Section -->
-        <div class="card p-6 variant-soft-primary border-2 border-primary-500 shadow-xl space-y-4">
-            <header class="flex justify-between items-center border-b border-primary-500/30 pb-2">
+        <div
+            class="card variant-soft-primary border-primary-500 space-y-4 border-2 p-6 shadow-xl">
+            <header
+                class="border-primary-500/30 flex items-center justify-between border-b pb-2">
                 <h2 class="h2 flex items-center gap-2">
                     <Lucide.Zap class="text-warning-500" /> Large File Progress Test
                 </h2>
                 <div class="flex gap-2">
-                    <span class="badge variant-filled-warning animate-pulse">Testing Percentage</span>
+                    <span class="badge variant-filled-warning animate-pulse"
+                        >Testing Percentage</span>
                     {#if test_direct_download}
-                        <span class="badge variant-filled-secondary">Direct Link</span>
+                        <span class="badge variant-filled-secondary"
+                            >Direct Link</span>
                     {/if}
                 </div>
             </header>
 
-            <p class="text-sm opacity-80 italic">
-                Use this file to verify the <strong>percentage counter</strong> and <strong>loading spinner</strong>.
-                This file is ~100MB+, which should provide ample time to observe the progress state.
+            <p class="text-sm italic opacity-80">
+                Use this file to verify the <strong>percentage counter</strong>
+                and <strong>loading spinner</strong>. This file is ~100MB+,
+                which should provide ample time to observe the progress state.
             </p>
 
             {#if large_file_obj}
-                <div class="bg-black/20 p-4 rounded-container border border-primary-500/20 flex flex-col md:flex-row justify-between items-center gap-4">
+                <div
+                    class="rounded-container border-primary-500/20 flex flex-col items-center justify-between gap-4 border bg-black/20 p-4 md:flex-row">
                     <div class="flex items-center gap-4">
-                        <div class="p-3 bg-primary-500/20 rounded-lg">
+                        <div class="bg-primary-500/20 rounded-lg p-3">
                             <Lucide.FileArchive size={32} />
                         </div>
                         <div>
-                            <h3 class="font-bold text-lg">{large_file_obj.filename}</h3>
-                            <p class="text-xs font-mono opacity-50">ID: {LARGE_FILE_ID}</p>
+                            <h3 class="text-lg font-bold">
+                                {large_file_obj.filename}
+                            </h3>
+                            <p class="font-mono text-xs opacity-50">
+                                ID: {LARGE_FILE_ID}
+                            </p>
                         </div>
                     </div>
 
@@ -133,95 +156,112 @@
                             show_direct_download={test_direct_download}
                             variant="filled"
                             color="primary"
-                            classes="w-full md:min-w-64 py-4"
-                        />
+                            classes="w-full md:min-w-64 py-4" />
                     </div>
                 </div>
             {/if}
         </div>
 
-        <div class="card p-6 variant-soft-surface space-y-4 border border-gray-500 shadow-lg">
+        <div
+            class="card variant-soft-surface space-y-4 border border-gray-500 p-6 shadow-lg">
             <h2 class="h2">Style & Variant Trials</h2>
 
             {#if loading}
-                <div class="flex items-center gap-2 py-10 justify-center">
+                <div class="flex items-center justify-center gap-2 py-10">
                     <Lucide.LoaderCircle class="animate-spin" />
                     <span>Loading test metadata gallery...</span>
                 </div>
             {:else}
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                     {#each hosted_files as file (file.id)}
-                        <div class="card p-4 variant-soft-secondary space-y-4">
-                            <div class="flex justify-between items-start">
+                        <div class="card variant-soft-secondary space-y-4 p-4">
+                            <div class="flex items-start justify-between">
                                 <div>
                                     <h3 class="font-bold">{file.filename}</h3>
-                                    <p class="text-xs opacity-60 font-mono">ID: {file.id}</p>
+                                    <p class="font-mono text-xs opacity-60">
+                                        ID: {file.id}
+                                    </p>
                                 </div>
-                                <span class="badge variant-filled-primary uppercase">{file.extension}</span>
+                                <span
+                                    class="badge variant-filled-primary uppercase"
+                                    >{file.extension}</span>
                             </div>
 
-                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
+                            <div
+                                class="grid grid-cols-1 gap-4 pt-2 sm:grid-cols-2">
                                 <div class="space-y-1">
-                                    <p class="text-[10px] opacity-50 uppercase font-bold">Variant: Tonal</p>
+                                    <p
+                                        class="text-[10px] font-bold uppercase opacity-50">
+                                        Variant: Tonal
+                                    </p>
                                     <AE_Comp_Hosted_Files_Download_Button
                                         hosted_file_id={file.id}
                                         hosted_file_obj={file}
                                         show_direct_download={test_direct_download}
                                         variant="tonal"
                                         color="primary"
-                                        classes="w-full"
-                                    />
+                                        classes="w-full" />
                                 </div>
 
                                 <div class="space-y-1">
-                                    <p class="text-[10px] opacity-50 uppercase font-bold">Variant: Filled</p>
+                                    <p
+                                        class="text-[10px] font-bold uppercase opacity-50">
+                                        Variant: Filled
+                                    </p>
                                     <AE_Comp_Hosted_Files_Download_Button
                                         hosted_file_id={file.id}
                                         hosted_file_obj={file}
                                         show_direct_download={test_direct_download}
                                         variant="filled"
                                         color="secondary"
-                                        classes="w-full"
-                                    />
+                                        classes="w-full" />
                                 </div>
 
                                 <div class="space-y-1">
-                                    <p class="text-[10px] opacity-50 uppercase font-bold">Variant: Outline</p>
+                                    <p
+                                        class="text-[10px] font-bold uppercase opacity-50">
+                                        Variant: Outline
+                                    </p>
                                     <AE_Comp_Hosted_Files_Download_Button
                                         hosted_file_id={file.id}
                                         hosted_file_obj={file}
                                         show_direct_download={test_direct_download}
                                         variant="outline"
                                         color="tertiary"
-                                        classes="w-full"
-                                    />
+                                        classes="w-full" />
                                 </div>
 
                                 <div class="space-y-1">
-                                    <p class="text-[10px] opacity-50 uppercase font-bold">Variant: Ghost</p>
+                                    <p
+                                        class="text-[10px] font-bold uppercase opacity-50">
+                                        Variant: Ghost
+                                    </p>
                                     <AE_Comp_Hosted_Files_Download_Button
                                         hosted_file_id={file.id}
                                         hosted_file_obj={file}
                                         show_direct_download={test_direct_download}
                                         variant="ghost"
                                         color="surface"
-                                        classes="w-full"
-                                    />
+                                        classes="w-full" />
                                 </div>
                             </div>
 
-                            <div class="pt-2 border-t border-surface-500/20">
-                                <p class="text-[10px] opacity-50 uppercase font-bold">Custom Label Snippet:</p>
+                            <div class="border-surface-500/20 border-t pt-2">
+                                <p
+                                    class="text-[10px] font-bold uppercase opacity-50">
+                                    Custom Label Snippet:
+                                </p>
                                 <AE_Comp_Hosted_Files_Download_Button
                                     hosted_file_id={file.id}
                                     hosted_file_obj={file}
                                     show_direct_download={test_direct_download}
                                     variant="tonal"
                                     color="success"
-                                    classes="w-full mt-1"
-                                >
+                                    classes="w-full mt-1">
                                     {#snippet label()}
-                                        <Lucide.FileArchive size={16} class="mr-2" />
+                                        <Lucide.FileArchive
+                                            size={16}
+                                            class="mr-2" />
                                         <span>Download Source</span>
                                     {/snippet}
                                 </AE_Comp_Hosted_Files_Download_Button>
@@ -232,18 +272,20 @@
             {/if}
         </div>
 
-        <div class="card p-6 variant-soft-warning border border-warning-500 shadow-lg">
-            <h3 class="h3 font-bold text-warning-700 dark:text-warning-500 flex items-center gap-2">
+        <div
+            class="card variant-soft-warning border-warning-500 border p-6 shadow-lg">
+            <h3
+                class="h3 text-warning-700 dark:text-warning-500 flex items-center gap-2 font-bold">
                 <Lucide.AlertTriangle size={20} /> Edge Case: Missing Metadata
             </h3>
-            <p class="text-sm opacity-80 mt-2">
-                Testing the component when <code>hosted_file_id</code> or <code>hosted_file_obj</code> is missing.
+            <p class="mt-2 text-sm opacity-80">
+                Testing the component when <code>hosted_file_id</code> or
+                <code>hosted_file_obj</code> is missing.
             </p>
-            <div class="flex gap-4 mt-4">
+            <div class="mt-4 flex gap-4">
                 <AE_Comp_Hosted_Files_Download_Button
                     hosted_file_id={null}
-                    hosted_file_obj={null}
-                />
+                    hosted_file_obj={null} />
             </div>
         </div>
     </div>