From 39cd2dbafbf5089662b05b37247eda836250529f Mon Sep 17 00:00:00 2001
From: Morgan Dean <morgandeanhi@gmail.com>
Date: Thu, 3 Apr 2025 16:11:18 -0700
Subject: [PATCH 1/9] add wanring error if rewards could not be retrieved

---
 src/lib/api/endpoints/gym/quests.ts  | 16 ++++++----------
 src/routes/app/gym/chat/+page.svelte |  5 +++++
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/lib/api/endpoints/gym/quests.ts b/src/lib/api/endpoints/gym/quests.ts
index 8eac6e2..93d5688 100644
--- a/src/lib/api/endpoints/gym/quests.ts
+++ b/src/lib/api/endpoints/gym/quests.ts
@@ -34,16 +34,12 @@ export async function generateQuest(
 
   // If poolId is provided, get reward info
   if (poolId) {
-    try {
-      const rewardInfo = await getReward(poolId, taskId);
-      quest.pool_id = poolId;
-      quest.reward = { time: rewardInfo.time, max_reward: rewardInfo.maxReward };
-      // If taskId is provided, add it to the quest
-      if (taskId) {
-        quest.task_id = taskId;
-      }
-    } catch (error) {
-      console.error('Failed to get reward info:', error);
+    quest.pool_id = poolId;
+    const rewardInfo = await getReward(poolId, taskId);
+    quest.reward = { time: rewardInfo.time, max_reward: rewardInfo.maxReward };
+    // If taskId is provided, add it to the quest
+    if (taskId) {
+      quest.task_id = taskId;
     }
   }
 
diff --git a/src/routes/app/gym/chat/+page.svelte b/src/routes/app/gym/chat/+page.svelte
index c0b92c7..faeecf0 100644
--- a/src/routes/app/gym/chat/+page.svelte
+++ b/src/routes/app/gym/chat/+page.svelte
@@ -252,6 +252,11 @@
               max_reward: rewardInfo.maxReward
             };
           } catch (error) {
+            await addMessage({
+              role: 'assistant',
+              content:
+                'Failed to get task reward info.\nWARNING: This quest will not provide rewards.'
+            });
             console.error('Failed to get reward info:', error);
           }
         }

From 32ce4a21717e4ecbd1af918f65e20a2ed858742b Mon Sep 17 00:00:00 2001
From: Morgan Dean <morgandeanhi@gmail.com>
Date: Sun, 13 Apr 2025 18:42:40 -0700
Subject: [PATCH 2/9] Adjust saving forge buttons, add email notification form.

---
 src/lib/api/endpoints/forge/pools.ts          |   9 +
 src/lib/components/form/Button.svelte         |   1 +
 src/lib/components/form/Input.svelte          |  17 +-
 .../gym-builder/GymBuilderView.svelte         |  32 +-
 .../components/gym-builder/OverviewTab.svelte | 157 +++++++---
 .../components/gym-builder/SettingsTab.svelte |  42 +--
 .../components/gym-builder/TasksTab.svelte    | 225 +++++++-------
 .../components/gym-builder/UploadsTab.svelte  | 277 ++++++++++--------
 src/lib/types/forge.ts                        |   2 +
 src/routes/app/+layout.svelte                 |   3 +
 src/routes/app/forge/gym/+page.svelte         |   8 +-
 src/routes/app/gym/+layout.svelte             |   3 -
 12 files changed, 437 insertions(+), 339 deletions(-)

diff --git a/src/lib/api/endpoints/forge/pools.ts b/src/lib/api/endpoints/forge/pools.ts
index 3bd2327..7252524 100644
--- a/src/lib/api/endpoints/forge/pools.ts
+++ b/src/lib/api/endpoints/forge/pools.ts
@@ -88,3 +88,12 @@ export async function createPoolWithApps(
 ): Promise<TrainingPool> {
   return apiClient.post<TrainingPool>('/forge/pools', input, { requiresAuth: true });
 }
+
+/**
+ * Update a pool with an email address
+ * @param email The email address
+ * @returns Promise resolving to void
+ */
+export async function updatePoolEmail(poolID: string, email: string): Promise<void> {
+  return apiClient.put('/forge/pools/email', { id: poolID, email }, { requiresAuth: true });
+}
diff --git a/src/lib/components/form/Button.svelte b/src/lib/components/form/Button.svelte
index c04ff3c..cc6cf07 100644
--- a/src/lib/components/form/Button.svelte
+++ b/src/lib/components/form/Button.svelte
@@ -9,6 +9,7 @@
     children: Snippet;
     variant?: 'primary' | 'destroy' | 'warning' | 'secondary' | 'green';
     behavior?: 'invert' | 'none';
+    rest?: HTMLButtonAttributes;
   };
 
   let {
diff --git a/src/lib/components/form/Input.svelte b/src/lib/components/form/Input.svelte
index e841b35..0fd65e5 100644
--- a/src/lib/components/form/Input.svelte
+++ b/src/lib/components/form/Input.svelte
@@ -35,15 +35,22 @@
   });
 </script>
 
-<div class="relative group">
-  <div
-    class="absolute text-gray-400 group-focus-within:text-secondary-300 inset-y-0 start-0 flex transition-all items-center ps-3 pointer-events-none">
-    {@render icon?.()}
+{#if icon}
+  <div class="relative group">
+    <div
+      class="absolute text-gray-400 group-focus-within:text-secondary-300 inset-y-0 start-0 flex transition-all items-center ps-3 pointer-events-none">
+      {@render icon?.()}
+    </div>
+    <input
+      class="{variantClasses} w-full ps-12 py-2 px-3 rounded-lg border focus:outline-none focus:ring transition-all {className}"
+      bind:value
+      {...rest} />
   </div>
+{:else}
   <input
     class="{variantClasses} w-full {icon
       ? 'ps-12'
       : ''} py-2 px-3 rounded-lg border focus:outline-none focus:ring transition-all {className}"
     bind:value
     {...rest} />
-</div>
+{/if}
diff --git a/src/lib/components/gym-builder/GymBuilderView.svelte b/src/lib/components/gym-builder/GymBuilderView.svelte
index 0918df8..ab7a8e4 100644
--- a/src/lib/components/gym-builder/GymBuilderView.svelte
+++ b/src/lib/components/gym-builder/GymBuilderView.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Button from '$lib/components/form/Button.svelte';
   import GenerateGymModal from '$lib/components/modals/GenerateGymModal.svelte';
-  import { Upload, ListTodo, Sliders, LayoutDashboard } from 'lucide-svelte';
+  import { Upload, ListTodo, Sliders, LayoutDashboard, LoaderCircle } from 'lucide-svelte';
   import { TrainingPoolStatus, type TrainingPool, type PoolSubmission } from '$lib/types/forge';
 
   // Import our tab components
@@ -27,6 +27,7 @@
   let activeTab = 'overview';
   let unsavedChanges = false;
   let showSkillsModal = false;
+  let savingChanges = false;
   let submissions: PoolSubmission[] = [];
 
   // Reference to the TasksTab component to access its apps array
@@ -36,6 +37,7 @@
 
   async function handleSaveChanges() {
     try {
+      savingChanges = true;
       // Create an updates object to hold all changes
       const updates: any = {};
 
@@ -90,6 +92,8 @@
     } catch (error) {
       console.error('Failed to save changes:', error);
       alert('Failed to save changes. Please try again.');
+    } finally {
+      savingChanges = false;
     }
   }
 
@@ -268,24 +272,32 @@
     {#if activeTab === 'overview'}
       <OverviewTab {pool} />
     {:else if activeTab === 'settings'}
-      <SettingsTab
-        {pool}
-        {onSave}
-        {onRefresh}
-        {refreshingPools}
-        {unsavedChanges}
-        {handleSaveChanges} />
+      <SettingsTab {pool} {onRefresh} {refreshingPools} bind:unsavedChanges />
     {:else if activeTab === 'tasks'}
       <TasksTab
         bind:this={tasksTabComponent}
         bind:apps={tasksApps}
         {pool}
         bind:unsavedChanges
-        {regenerateTasks}
-        {handleSaveChanges} />
+        {regenerateTasks} />
     {:else if activeTab === 'uploads'}
       <UploadsTab {pool} bind:submissions />
     {/if}
+
+    <div class="flex py-2 flex-col gap-2">
+      {#if unsavedChanges}
+        <Button
+          class="w-full justify-center border-green-500! hover:border-green-600! bg-green-500! text-white! hover:bg-green-600!"
+          disabled={savingChanges}
+          onclick={handleSaveChanges}>
+          {#if !savingChanges}
+            Save Changes
+          {:else}
+            <LoaderCircle class="animate-spin w-8 h-8 mx-auto" />
+          {/if}
+        </Button>
+      {/if}
+    </div>
   </div>
 </div>
 
diff --git a/src/lib/components/gym-builder/OverviewTab.svelte b/src/lib/components/gym-builder/OverviewTab.svelte
index eba4789..aedbfbf 100644
--- a/src/lib/components/gym-builder/OverviewTab.svelte
+++ b/src/lib/components/gym-builder/OverviewTab.svelte
@@ -1,47 +1,101 @@
 <script lang="ts">
   import Card from '../Card.svelte';
   import CopyButton from '../CopyButton.svelte';
-  import { AlertTriangle } from 'lucide-svelte';
+  import { AlertTriangle, LoaderCircle } from 'lucide-svelte';
   import { TrainingPoolStatus, type TrainingPool } from '$lib/types/forge';
+  import Input from '../form/Input.svelte';
+  import Button from '../form/Button.svelte';
+  import { showToast } from '$lib/utils';
+  import { ApiError, updatePoolEmail } from '$lib/api';
+  import { onMount } from 'svelte';
+
+  let {
+    pool
+  }: {
+    pool: TrainingPool & {
+      unsavedSkills?: boolean;
+      unsavedPrice?: boolean;
+      unsavedName?: boolean;
+    };
+  } = $props();
+
+  let loading = $state(false);
+  let email = $state('');
+  onMount(() => {
+    email = pool.ownerEmail || '';
+  });
 
-  export let pool: TrainingPool & {
-    unsavedSkills?: boolean;
-    unsavedPrice?: boolean;
-    unsavedName?: boolean;
-  };
-  
   function formatNumber(num: number) {
     return num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
   }
+
+  async function saveEmail() {
+    if (!email) return;
+    loading = true;
+    try {
+      await updatePoolEmail(pool._id, email);
+    } catch (e) {
+      if ((e as ApiError).status === 400) {
+        showToast(
+          'Error Saving Email',
+          'There was an error validating your email. Make sure you entered it correctly.'
+        );
+        loading = false;
+        return;
+      }
+    }
+    showToast(
+      'Email Saved',
+      'You will now get email notifications when your gym runs out of funds!',
+      { timeout: 5000 }
+    );
+    loading = false;
+  }
 </script>
 
 <div class="space-y-6">
   <!-- Gym Overview Card -->
-  <Card padding="md" className="border border-gray-200 hover:shadow-md transition-shadow duration-300">
-    <div class="flex items-center justify-between mb-4">
-      <h3 class="text-xl font-bold">{pool.name}</h3>
-    </div>
-    
-    <!-- Key Stats -->
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-      <div class="bg-blue-50 p-4 rounded-lg">
-        <div class="text-sm text-blue-800">Total Demonstrations</div>
-        <div class="text-2xl font-bold text-blue-900">{pool.demonstrations.toLocaleString()}</div>
-      </div>
-      
-      <div class="bg-green-50 p-4 rounded-lg">
-        <div class="text-sm text-green-800">Pool Balance</div>
-        <div class="text-2xl font-bold text-green-900">{formatNumber(pool.funds)} {pool.token.symbol}</div>
+  <Card
+    padding="md"
+    className="border border-gray-200 hover:shadow-md transition-shadow duration-300">
+    <div>
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="text-xl font-bold">{pool.name}</h3>
       </div>
-      
-      <div class="bg-purple-50 p-4 rounded-lg">
-        <div class="text-sm text-purple-800">Reward Per Demo</div>
-        <div class="text-2xl font-bold text-purple-900">{pool.pricePerDemo || 1} {pool.token.symbol}</div>
+
+      <!-- Key Stats -->
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+        <div class="bg-blue-50 p-4 rounded-lg">
+          <div class="text-sm text-blue-800">Total Demonstrations</div>
+          <div class="text-2xl font-bold text-blue-900">{pool.demonstrations.toLocaleString()}</div>
+        </div>
+        <div class="bg-purple-50 p-4 rounded-lg">
+          <div class="text-sm text-purple-800">Reward Per Demo</div>
+          <div class="text-2xl font-bold text-purple-900">
+            {pool.pricePerDemo || 1}
+            {pool.token.symbol}
+          </div>
+        </div>
+
+        <div class="bg-green-50 p-4 rounded-lg">
+          <div class="text-sm text-green-800">Pool Balance</div>
+          <div class="text-2xl font-bold text-green-900">
+            {formatNumber(pool.funds)}
+            {pool.token.symbol}
+          </div>
+        </div>
+        <div class="bg-yellow-50 p-4 rounded-lg">
+          <div class="text-sm text-yellow-800">Gas Balance</div>
+          <div class="text-2xl font-bold text-yellow-900">
+            {formatNumber(pool.solBalance)}
+            SOL
+          </div>
+        </div>
       </div>
     </div>
-    
+
     <!-- Summary Data -->
-    <div class="mb-4">
+    <div class="py-2">
       <h4 class="text-sm font-bold text-gray-700 mb-2">Deposit Address</h4>
       <div class="flex gap-2 items-center">
         <input
@@ -55,8 +109,36 @@
         Send {pool.token.symbol} tokens to this address to fund your gym.
       </p>
     </div>
+    <div class="py-2">
+      <div class="">
+        <h3 class="text-xl font-bold">Notifications</h3>
+        <p class="py-2">Get an email when your gym runs out of $VIRAL or SOL for gas fees.</p>
+        <form
+          onsubmit={(e) => {
+            e.preventDefault();
+            if (loading) return;
+            saveEmail();
+          }}
+          class="w-full flex gap-2">
+          <Input
+            bind:value={email}
+            type="email"
+            variant="light"
+            class="flex-1"
+            required
+            placeholder="example@example.com" />
+          <Button class="bg-secondary-500! hover:bg-secondary-600!" type="submit" behavior="none">
+            {#if !loading}
+              Save
+            {:else}
+              <LoaderCircle class="w-6 h-6 mx-[0.33rem] animate-spin" />
+            {/if}
+          </Button>
+        </form>
+      </div>
+    </div>
   </Card>
-  
+
   <!-- Status Section -->
   {#if pool.status === TrainingPoolStatus.noGas || pool.status === TrainingPoolStatus.noFunds}
     <div class="p-4 my-3 bg-amber-50 border-l-4 border-amber-400 rounded-lg flex gap-3 shadow-sm">
@@ -65,22 +147,21 @@
       </div>
       <div class="flex-1">
         {#if pool.status === TrainingPoolStatus.noGas}
-          <p class="text-sm text-amber-900 font-semibold mb-1">
-            Insufficient SOL for Gas
-          </p>
+          <p class="text-sm text-amber-900 font-semibold mb-1">Insufficient SOL for Gas</p>
           <p class="text-xs leading-relaxed text-amber-800">
-            Your gym needs SOL to pay for on-chain transactions. Without gas, the gym cannot function on the Solana blockchain.
+            Your gym needs SOL to pay for on-chain transactions. Without gas, the gym cannot
+            function on the Solana blockchain.
           </p>
         {:else if pool.status === TrainingPoolStatus.noFunds}
-          <p class="text-sm text-amber-900 font-semibold mb-1">
-            Insufficient VIRAL Tokens
-          </p>
+          <p class="text-sm text-amber-900 font-semibold mb-1">Insufficient VIRAL Tokens</p>
           <p class="text-xs leading-relaxed text-amber-800">
-            Your gym needs VIRAL tokens to reward users who provide demonstrations. Without funds, users won't receive compensation.
+            Your gym needs VIRAL tokens to reward users who provide demonstrations. Without funds,
+            users won't receive compensation.
           </p>
         {/if}
         <p class="text-xs text-amber-800 font-medium mt-2">
-          Deposit {pool.status === TrainingPoolStatus.noGas ? 'SOL' : 'VIRAL'} to the address above to activate your gym and start collecting data.
+          Deposit {pool.status === TrainingPoolStatus.noGas ? 'SOL' : 'VIRAL'} to the address above to
+          activate your gym and start collecting data.
         </p>
       </div>
     </div>
diff --git a/src/lib/components/gym-builder/SettingsTab.svelte b/src/lib/components/gym-builder/SettingsTab.svelte
index 972b12b..1b6178b 100644
--- a/src/lib/components/gym-builder/SettingsTab.svelte
+++ b/src/lib/components/gym-builder/SettingsTab.svelte
@@ -16,11 +16,9 @@
     unsavedName?: boolean;
     unsavedUploadLimit?: boolean;
   };
-  export let onSave: (pool: TrainingPool, updates: any) => Promise<void>;
   export let onRefresh: (poolId: string) => Promise<void>;
   export let refreshingPools: Set<string>;
   export let unsavedChanges: boolean;
-  export let handleSaveChanges: () => Promise<void>;
 
   // Upload limit stats
   let currentCount = 0;
@@ -268,15 +266,16 @@
           Price per Demonstration
         </label>
         <div class="flex items-center gap-2">
-          <input
+          <Input
+            variant="light"
             id="demo-price"
             type="number"
             min="1"
             step="0.1"
-            class="flex-1 p-2 bg-gray-100 rounded-lg border-0"
+            class="flex-1 p-2  w-full! grow!"
             value={pool.pricePerDemo || 1}
             oninput={handlePriceChange} />
-          <span class="text-sm font-medium">{pool.token.symbol}</span>
+          <span class="text-sm font-medium grow-0">{pool.token.symbol}</span>
         </div>
         <p class="text-xs text-gray-500 mt-1">
           Minimum price: 1 {pool.token.symbol}
@@ -487,37 +486,4 @@
       </div>
     </div>
   </Card>
-
-  <div class="flex flex-col gap-2">
-    {#if unsavedChanges}
-      <Button
-        class="w-full justify-center border-green-500! hover:border-green-600! bg-green-500! text-white! hover:bg-green-600!"
-        onclick={handleSaveChanges}>
-        Save Changes
-      </Button>
-    {/if}
-
-    <Button
-      behavior="none"
-      class="py-4!"
-      variant={pool.status === TrainingPoolStatus.live ? 'secondary' : 'green'}
-      title={pool.status === TrainingPoolStatus.live ? 'Pause Gym' : 'Activate Gym'}
-      onclick={() =>
-        onSave(pool, {
-          status:
-            pool.status === TrainingPoolStatus.live
-              ? TrainingPoolStatus.paused
-              : TrainingPoolStatus.live
-        })}>
-      <div class="flex items-center">
-        {#if pool.status === TrainingPoolStatus.live}
-          <Pause size={16} class="mr-2" />
-          Pause Gym
-        {:else}
-          <Play size={16} class="mr-2" />
-          Activate Gym
-        {/if}
-      </div>
-    </Button>
-  </div>
 </div>
diff --git a/src/lib/components/gym-builder/TasksTab.svelte b/src/lib/components/gym-builder/TasksTab.svelte
index 4f9add3..ea4edee 100644
--- a/src/lib/components/gym-builder/TasksTab.svelte
+++ b/src/lib/components/gym-builder/TasksTab.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
   import Card from '$lib/components/Card.svelte';
-  import Button from '$lib/components/form/Button.svelte';
   import TaskEditModal from '../modals/TaskEditModal.svelte';
-  import { Pencil, Check, X, Eye, Sparkles, Plus, Trash2, Save, RotateCcw, Video } from 'lucide-svelte';
+  import {
+    Pencil,
+    Check,
+    X,
+    Eye,
+    Sparkles,
+    Plus,
+    Trash2,
+    Save,
+    RotateCcw,
+    Video
+  } from 'lucide-svelte';
   import { TrainingPoolStatus, type TrainingPool } from '$lib/types/forge';
   import type { ForgeApp } from '$lib/types/gym';
   import { getAppsForGym } from '$lib/api/endpoints/forge';
   import AvailableTasks from '$lib/components/gym/AvailableTasks.svelte';
   import { onMount } from 'svelte';
-
-  // Function to save changes to the backend
-  export let handleSaveChanges: () => Promise<void>;
-
-  // Wrap the original handleSaveChanges to update originalApps after saving
-  async function saveChanges() {
-    await handleSaveChanges();
-    // Update originalApps after saving
-    originalApps = JSON.parse(JSON.stringify(apps));
-    pool.unsavedApps = false;
-  }
+  import Input from '../form/Input.svelte';
 
   // Store original apps for reset functionality
   let originalApps: ForgeApp[] = [];
@@ -52,6 +52,8 @@
   let newAppName = '';
   let newAppDomain = '';
   let showNewAppForm = false;
+  let scrollableContainer: HTMLDivElement;
+  let newAppFormRef: HTMLDivElement;
   // Make apps public so it can be accessed by the parent component
   export let apps: ForgeApp[] = [];
   let loadingApps = true;
@@ -62,14 +64,6 @@
     originalApps = JSON.parse(JSON.stringify(apps));
   });
 
-  // Function to reset changes
-  function resetChanges() {
-    // Restore apps from the original copy
-    apps = JSON.parse(JSON.stringify(originalApps));
-    unsavedChanges = false;
-    pool.unsavedApps = false;
-  }
-
   async function loadApps() {
     loadingApps = true;
     try {
@@ -95,7 +89,7 @@
       rewardLimitValue = task.rewardLimit ?? 10;
     } else {
       // New task
-      editTaskPrompt = 'Enter task description here';
+      editTaskPrompt = '';
       enableUploadLimit = false;
       uploadLimitValue = 10;
       enableRewardLimit = false;
@@ -244,6 +238,14 @@
     showNewAppForm = false;
   }
 
+  // Watch for changes to showNewAppForm and scroll to the form when it becomes true
+  $: if (showNewAppForm && newAppFormRef) {
+    // Use setTimeout to ensure the DOM has updated
+    setTimeout(() => {
+      newAppFormRef.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }, 0);
+  }
+
   function addNewTask(appIndex: number) {
     if (appIndex >= 0 && appIndex < apps.length) {
       openTaskModal(apps[appIndex], -1); // -1 indicates a new task
@@ -310,6 +312,7 @@
 
 <!-- Scrollable task container -->
 <div
+  bind:this={scrollableContainer}
   class="overflow-y-auto px-3 relative"
   style={`max-height: calc(100vh - ${(pool.status === TrainingPoolStatus.noFunds || pool.status === TrainingPoolStatus.noGas ? 120 : 0) + 220}px);`}>
   <!-- Tasks Tab Content -->
@@ -423,39 +426,41 @@
                       <div
                         class="w-full text-left flex items-center bg-gray-50 p-2 rounded-md hover:bg-gray-200 hover:shadow-sm transition-all duration-320">
                         <p class="grow text-gray-800 text-sm">{task.prompt}</p>
-                      <div class="flex items-center gap-2 ml-2">
-                        {#if typeof task.uploadLimit === 'number'}
-                          <span
-                            class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
-                            {task.currentSubmissions ?? 0}/{task.uploadLimit}
-                          </span>
-                        {/if}
-                        {#if typeof task.rewardLimit === 'number'}
-                          <span
-                            class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
-                            {task.rewardLimit} VIRAL
-                          </span>
-                        {/if}
-                        <a
-                          href="/app/gym/chat?prompt={encodeURIComponent(task.prompt)}&app={encodeURIComponent(
-                            JSON.stringify({
-                              type: 'website',
-                              name: app.name,
-                              url: `https://${app.domain}`,
-                              task_id: task._id
-                            })
-                          )}&poolId={app.pool_id._id}"
-                          class="text-gray-700 opacity-0 group-hover:opacity-100 transition-all duration-200"
-                          title="Record Task">
-                          <Video size={14} />
-                        </a>
-                        <button
-                          class="text-gray-700 opacity-0 group-hover:opacity-100 transition-all duration-200"
-                          title="Edit Task"
-                          onclick={() => openTaskModal(app, taskIndex)}>
-                          <Pencil size={14} />
-                        </button>
-                      </div>
+                        <div class="flex items-center gap-2 ml-2">
+                          {#if typeof task.uploadLimit === 'number'}
+                            <span
+                              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
+                              {task.currentSubmissions ?? 0}/{task.uploadLimit}
+                            </span>
+                          {/if}
+                          {#if typeof task.rewardLimit === 'number'}
+                            <span
+                              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
+                              {task.rewardLimit} VIRAL
+                            </span>
+                          {/if}
+                          <a
+                            href="/app/gym/chat?prompt={encodeURIComponent(
+                              task.prompt
+                            )}&app={encodeURIComponent(
+                              JSON.stringify({
+                                type: 'website',
+                                name: app.name,
+                                url: `https://${app.domain}`,
+                                task_id: task._id
+                              })
+                            )}&poolId={app.pool_id._id}"
+                            class="text-gray-700 opacity-0 group-hover:opacity-100 transition-all duration-200"
+                            title="Record Task">
+                            <Video size={14} />
+                          </a>
+                          <button
+                            class="text-gray-700 opacity-0 group-hover:opacity-100 transition-all duration-200"
+                            title="Edit Task"
+                            onclick={() => openTaskModal(app, taskIndex)}>
+                            <Pencil size={14} />
+                          </button>
+                        </div>
                       </div>
                       <button
                         class="text-gray-400 opacity-0 group-hover:opacity-100 hover:text-red-500 p-1 ml-2 transition-all"
@@ -480,77 +485,61 @@
       <div class="mt-4 flex justify-center">
         <button
           class="px-4 py-2 bg-secondary-500 text-white rounded-md hover:bg-secondary-600 transition-colors flex items-center gap-2"
-          onclick={() => (showNewAppForm = true)}>
+          onclick={() => {
+            showNewAppForm = true;
+          }}>
           <Plus size={16} />
           Add New App
         </button>
       </div>
     {:else}
-      <Card padding="md" className="border border-gray-200 mt-4">
-        <div class="p-2">
-          <h3 class="text-lg font-medium mb-3">Add New App</h3>
-          <div class="space-y-3">
-            <div>
-              <label for="app-name" class="block text-sm font-medium text-gray-700 mb-1">
-                App Name
-              </label>
-              <input
-                id="app-name"
-                type="text"
-                class="w-full px-3 py-2 border border-gray-300 rounded-md"
-                placeholder="Enter app name"
-                bind:value={newAppName} />
-            </div>
-            <div>
-              <label for="app-domain" class="block text-sm font-medium text-gray-700 mb-1">
-                App Domain (optional)
-              </label>
-              <input
-                id="app-domain"
-                type="text"
-                class="w-full px-3 py-2 border border-gray-300 rounded-md"
-                placeholder="e.g. example.com"
-                bind:value={newAppDomain} />
-            </div>
-            <div class="flex justify-end gap-2 pt-2">
-              <button
-                class="px-3 py-1.5 border border-gray-300 rounded-md hover:bg-gray-100"
-                onclick={resetNewAppForm}>
-                Cancel
-              </button>
-              <button
-                class="px-3 py-1.5 bg-secondary-500 text-white rounded-md hover:bg-secondary-600 disabled:opacity-50 disabled:cursor-not-allowed"
-                disabled={!newAppName}
-                onclick={addNewApp}>
-                Add App
-              </button>
+      <div bind:this={newAppFormRef}>
+        <Card padding="md" className="border border-gray-200 mt-4">
+          <div class="p-2">
+            <h3 class="text-lg font-medium mb-3">Add New App</h3>
+            <div class="space-y-3">
+              <div>
+                <label for="app-name" class="block text-sm font-medium text-gray-700 mb-1">
+                  App Name
+                </label>
+                <Input
+                  variant="light"
+                  id="app-name"
+                  type="text"
+                  class="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  placeholder="Enter app name"
+                  bind:value={newAppName} />
+              </div>
+              <div>
+                <label for="app-domain" class="block text-sm font-medium text-gray-700 mb-1">
+                  App Domain (optional)
+                </label>
+                <Input
+                  variant="light"
+                  id="app-domain"
+                  type="text"
+                  class="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  placeholder="e.g. example.com"
+                  bind:value={newAppDomain} />
+              </div>
+              <div class="flex justify-end gap-2 pt-2">
+                <button
+                  class="px-3 py-1.5 border border-gray-300 rounded-md hover:bg-gray-100"
+                  onclick={resetNewAppForm}>
+                  Cancel
+                </button>
+                <button
+                  class="px-3 py-1.5 bg-secondary-500 text-white rounded-md hover:bg-secondary-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                  disabled={!newAppName}
+                  onclick={addNewApp}>
+                  Add App
+                </button>
+              </div>
             </div>
           </div>
-        </div>
-      </Card>
-    {/if}
-  {/if}
-
-  <!-- Sticky bottom buttons for save/reset -->
-  {#if unsavedChanges}
-    <div class="sticky bottom-0 w-full bg-gray-50 border-gray-200 p-4 z-10">
-      <div class="flex gap-2">
-        <Button
-          class="w-1/2 justify-center border-green-500! hover:border-green-600! bg-green-500! text-white! hover:bg-green-600!"
-          onclick={saveChanges}>
-          <div class="flex items-center">
-            <Save size={16} class="mr-2" />
-            Save Changes
-          </div>
-        </Button>
-        <Button class="flex-1 justify-center" variant="secondary" onclick={resetChanges}>
-          <div class="flex items-center">
-            <RotateCcw size={16} class="mr-2" />
-            Reset Changes
-          </div>
-        </Button>
+        </Card>
       </div>
-    </div>
+    {/if}
   {/if}
 </div>
 
diff --git a/src/lib/components/gym-builder/UploadsTab.svelte b/src/lib/components/gym-builder/UploadsTab.svelte
index d7da20d..eac6dfa 100644
--- a/src/lib/components/gym-builder/UploadsTab.svelte
+++ b/src/lib/components/gym-builder/UploadsTab.svelte
@@ -1,10 +1,21 @@
 <script lang="ts">
   import Card from '$lib/components/Card.svelte';
   import DownloadScriptsModal from '$lib/components/modals/DownloadScriptsModal.svelte';
-  import { Code, Download, Clock, Monitor, Laptop, Server, Smartphone, Globe, Info } from 'lucide-svelte';
+  import {
+    Code,
+    Download,
+    Clock,
+    Monitor,
+    Laptop,
+    Server,
+    Smartphone,
+    Globe,
+    Info
+  } from 'lucide-svelte';
   import type { TrainingPool, PoolSubmission } from '$lib/types/forge';
   import { getPoolSubmissions } from '$lib/api/endpoints/forge';
   import { onMount } from 'svelte';
+  import { ApiError, ErrorCode } from '$lib/api';
 
   export let pool: TrainingPool & {
     unsavedSkills?: boolean;
@@ -23,8 +34,12 @@
       error = null;
       submissions = await getPoolSubmissions(pool._id);
     } catch (err) {
-      console.error('Failed to fetch pool submissions:', err);
-      error = 'Failed to load submissions. Please try again later.';
+      if ((err as ApiError).message.includes(ErrorCode.UNAUTHORIZED)) {
+        error = 'Not authenticated to load submissions. Please re-connect your wallet.';
+      } else {
+        console.error('Failed to reload submissions:', err);
+        error = 'Failed to load submissions. Please try again later.';
+      }
     } finally {
       loading = false;
     }
@@ -188,8 +203,12 @@
               error = null;
             })
             .catch((err) => {
-              console.error('Failed to reload submissions:', err);
-              error = 'Failed to load submissions. Please try again later.';
+              if ((err as ApiError).message.includes(ErrorCode.UNAUTHORIZED)) {
+                error = 'Not authenticated to load submissions. Please re-connect your wallet.';
+              } else {
+                console.error('Failed to reload submissions:', err);
+                error = 'Failed to load submissions. Please try again later.';
+              }
             })
             .finally(() => {
               loading = false;
@@ -199,137 +218,147 @@
       </button>
     </div>
   {:else}
-<div class="overflow-x-auto overflow-y-visible">
-  <table class="min-w-full divide-y divide-gray-200 relative">
-      <thead class="bg-gray-50">
-        <tr>
-          <th class="w-10 px-3 py-3">
-            <div class="flex items-center">
-              <input
-                type="checkbox"
-                class="h-4 w-4 text-secondary-600 focus:ring-secondary-500 border-gray-300 rounded cursor-pointer"
-                checked={allSelected}
-                onchange={toggleSelectAll}
-                disabled={submissions.length === 0} />
-            </div>
-          </th>
-          <th class="w-16 px-2 py-3"></th>
-          <th
-            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-            Task
-          </th>
-          <th
-            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-            Status
-          </th>
-          <th
-            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-            Duration
-          </th>
-          <th
-            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-            File Size
-          </th>
-          <th
-            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-            Quality
-          </th>
-          <th
-            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-            Reward
-          </th>
-        </tr>
-      </thead>
-      <tbody class="bg-white divide-y divide-gray-200">
-        {#each submissions as submission}
-          <tr class={selectedSubmissions.has(submission._id) ? 'bg-secondary-50' : ''}>
-            <td class="px-3 py-4 whitespace-nowrap">
+    <div class="overflow-x-auto overflow-y-visible">
+      <table class="min-w-full divide-y divide-gray-200 relative">
+        <thead class="bg-gray-50">
+          <tr>
+            <th class="w-10 px-3 py-3 overflow-x-scroll">
               <div class="flex items-center">
                 <input
                   type="checkbox"
                   class="h-4 w-4 text-secondary-600 focus:ring-secondary-500 border-gray-300 rounded cursor-pointer"
-                  checked={selectedSubmissions.has(submission._id)}
-                  onchange={() => toggleSelection(submission._id)} />
+                  checked={allSelected}
+                  onchange={toggleSelectAll}
+                  disabled={submissions.length === 0} />
               </div>
-            </td>
-            <td class="px-2 py-4 whitespace-nowrap text-gray-500">
-              <div class="flex items-center gap-2">
-                <!-- <span class="flex items-center gap-1 bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded text-xs font-mono">
+            </th>
+            <th
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Platform
+            </th>
+            <th
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Task
+            </th>
+            <th
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Status
+            </th>
+            <th
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Duration
+            </th>
+            <th
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              File Size
+            </th>
+            <th
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Quality
+            </th>
+            <th
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Reward
+            </th>
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+          {#each submissions as submission}
+            <tr class={selectedSubmissions.has(submission._id) ? 'bg-secondary-50' : ''}>
+              <td class="px-3 py-4 whitespace-nowrap">
+                <div class="flex items-center">
+                  <input
+                    type="checkbox"
+                    class="h-4 w-4 text-secondary-600 focus:ring-secondary-500 border-gray-300 rounded cursor-pointer"
+                    checked={selectedSubmissions.has(submission._id)}
+                    onchange={() => toggleSelection(submission._id)} />
+                </div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-gray-500">
+                <div class="flex items-center gap-2">
+                  <!-- <span class="flex items-center gap-1 bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded text-xs font-mono">
                   <Languages size={10} class="text-gray-500" />
                   {getLocaleCode(submission)}
                 </span> -->
+                  <span
+                    class="flex items-center gap-1 bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded text-xs font-mono">
+                    <svelte:component
+                      this={getOSIcon(submission)}
+                      size={10}
+                      class="text-gray-500" />
+                    {getPlatformLabel(submission)}
+                  </span>
+                </div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                {getTitle(submission)}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
                 <span
-                  class="flex items-center gap-1 bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded text-xs font-mono">
-                  <svelte:component this={getOSIcon(submission)} size={10} class="text-gray-500" />
-                  {getPlatformLabel(submission)}
-                </span>
-              </div>
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-              {getTitle(submission)}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap">
-              <span
-                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
+                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                 {submission.status === 'completed'
-                  ? 'bg-green-100 text-green-800'
-                  : submission.status === 'failed'
-                    ? 'bg-red-100 text-red-800'
-                    : 'bg-yellow-100 text-yellow-800'}">
-                {submission.status}
-              </span>
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-              <div class="flex items-center space-x-1">
-                <Clock size={14} class="text-gray-400" />
-                <span>{formatDuration(submission)}</span>
-              </div>
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-              {getTotalFileSize(submission)}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm">
-              {#if submission.grade_result?.score}
-                <span class="{submission.grade_result.score >= 50 
-                  ? 'text-green-600 font-semibold' 
-                  : submission.grade_result.score >= 25 
-                    ? 'text-yellow-600 font-semibold' 
-                    : 'text-red-600 font-semibold'}">
-                  {submission.grade_result.score}%
+                    ? 'bg-green-100 text-green-800'
+                    : submission.status === 'failed'
+                      ? 'bg-red-100 text-red-800'
+                      : 'bg-yellow-100 text-yellow-800'}">
+                  {submission.status}
                 </span>
-              {:else}
-                <span class="text-gray-500">-</span>
-              {/if}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-              {#if submission.reward && submission.reward > 0}
-                {submission.reward} VIRAL
-              {:else}
-                <div class="flex items-center gap-1">
-                  <span class="text-gray-500">FREE</span>
-                  {#if submission.grade_result?.reasoning}
-                    <div class="relative group">
-                      <Info size={14} class="text-gray-400" />
-                      <div class="absolute right-0 bottom-full mb-2 w-64 bg-gray-900 text-white text-xs rounded p-2 shadow-lg opacity-0 group-hover:opacity-100 transition-opacity z-10 pointer-events-none whitespace-normal break-words">
-                        {(submission.grade_result.reasoning.match(/\(\s*system:\s*(.*?)\s*\)/) || ['', ''])[1]}
-                      </div>
-                    </div>
-                  {/if}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                <div class="flex items-center space-x-1">
+                  <Clock size={14} class="text-gray-400" />
+                  <span>{formatDuration(submission)}</span>
                 </div>
-              {/if}
-            </td>
-          </tr>
-        {/each}
-        {#if submissions.length === 0}
-          <tr>
-            <td colspan="7" class="px-6 py-8 text-center text-gray-500">
-              No submissions yet. Submissions will appear here when users upload demonstrations.
-            </td>
-          </tr>
-        {/if}
-      </tbody>
-    </table>
-  </div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                {getTotalFileSize(submission)}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm">
+                {#if submission.grade_result?.score}
+                  <span
+                    class={submission.grade_result.score >= 50
+                      ? 'text-green-600 font-semibold'
+                      : submission.grade_result.score >= 25
+                        ? 'text-yellow-600 font-semibold'
+                        : 'text-red-600 font-semibold'}>
+                    {submission.grade_result.score}%
+                  </span>
+                {:else}
+                  <span class="text-gray-500">-</span>
+                {/if}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                {#if submission.reward && submission.reward > 0}
+                  {submission.reward} VIRAL
+                {:else}
+                  <div class="flex items-center gap-1">
+                    <span class="text-gray-500">FREE</span>
+                    {#if submission.grade_result?.reasoning}
+                      <div class="relative group">
+                        <Info size={14} class="text-gray-400" />
+                        <div
+                          class="absolute right-0 bottom-full mb-2 w-64 bg-gray-900 text-white text-xs rounded p-2 shadow-lg opacity-0 group-hover:opacity-100 transition-opacity z-10 pointer-events-none whitespace-normal break-words">
+                          {(submission.grade_result.reasoning.match(
+                            /\(\s*system:\s*(.*?)\s*\)/
+                          ) || ['', ''])[1]}
+                        </div>
+                      </div>
+                    {/if}
+                  </div>
+                {/if}
+              </td>
+            </tr>
+          {/each}
+          {#if submissions.length === 0}
+            <tr>
+              <td colspan="7" class="px-6 py-8 text-center text-gray-500">
+                No submissions yet. Submissions will appear here when users upload demonstrations.
+              </td>
+            </tr>
+          {/if}
+        </tbody>
+      </table>
+    </div>
   {/if}
 </Card>
 
diff --git a/src/lib/types/forge.ts b/src/lib/types/forge.ts
index 75cb887..cc281d5 100644
--- a/src/lib/types/forge.ts
+++ b/src/lib/types/forge.ts
@@ -67,8 +67,10 @@ export interface TrainingPool {
   status: TrainingPoolStatus;
   demonstrations: number;
   funds: number;
+  solBalance: number;
   token: Token;
   skills: string;
+  ownerEmail?: string;
   ownerAddress: string;
   depositAddress: string;
   expanded?: boolean;
diff --git a/src/routes/app/+layout.svelte b/src/routes/app/+layout.svelte
index 3636940..049383d 100644
--- a/src/routes/app/+layout.svelte
+++ b/src/routes/app/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { confirm } from '@tauri-apps/plugin-dialog';
   import InitToolsFailedModal from '$lib/components/modals/InitToolsFailedModal.svelte';
+  import ToastContainer from '$lib/components/toast/ToastContainer.svelte';
   import { listen, type UnlistenFn } from '@tauri-apps/api/event';
   import Sidebar from '$lib/components/Sidebar.svelte';
   import '../../app.css';
@@ -130,6 +131,8 @@
   }}
   open={showInitToolsError} />
 
+<ToastContainer />
+
 <style>
   :global(html, body) {
     background: transparent;
diff --git a/src/routes/app/forge/gym/+page.svelte b/src/routes/app/forge/gym/+page.svelte
index 2a70d46..21bec56 100644
--- a/src/routes/app/forge/gym/+page.svelte
+++ b/src/routes/app/forge/gym/+page.svelte
@@ -16,6 +16,7 @@
     unsavedName?: boolean;
   };
   let loading = true;
+  let savingChanges = false;
   let error: string | null = null;
   let refreshingPool = false;
   let viralPrice = 0;
@@ -25,7 +26,9 @@
   $: gymId = data.gymId;
 
   onMount(async () => {
+    loading = true;
     await loadPool();
+    loading = false;
     fetchPrices();
 
     // Set up periodic refresh
@@ -44,7 +47,6 @@
     if (!gymId || !$walletAddress) return;
 
     try {
-      loading = true;
       error = null;
 
       // Get all pools for the user
@@ -69,8 +71,6 @@
     } catch (err) {
       error = err instanceof Error ? err.message : 'Failed to load AI agent gym';
       console.error('Failed to load gym:', err);
-    } finally {
-      loading = false;
     }
   }
 
@@ -119,7 +119,9 @@
         id: poolToUpdate._id,
         ...updates
       });
+      savingChanges = true;
       await loadPool(); // Reload to get latest data
+      savingChanges = true;
     } catch (err) {
       error = err instanceof Error ? err.message : 'Failed to update AI agent gym';
     }
diff --git a/src/routes/app/gym/+layout.svelte b/src/routes/app/gym/+layout.svelte
index 4f4f04b..56b8907 100644
--- a/src/routes/app/gym/+layout.svelte
+++ b/src/routes/app/gym/+layout.svelte
@@ -5,7 +5,6 @@
   import { connectionToken, disconnectWallet, walletAddress } from '$lib/stores/wallet';
   import { listSubmissions } from '$lib/api/endpoints/forge';
   import { toolsInitState } from '$lib/utils';
-  import ToastContainer from '$lib/components/toast/ToastContainer.svelte';
   import type { ApiRecording, Quest } from '$lib/types/gym';
   import type { SubmissionStatus } from '$lib/types/forge';
   import type { ApiError } from '$lib/api';
@@ -81,5 +80,3 @@
     {@render children()}
   </div>
 </div>
-
-<ToastContainer />

From 496b303029008d112acd6a8777515f4dac0e35e0 Mon Sep 17 00:00:00 2001
From: Morgan Dean <morgandeanhi@gmail.com>
Date: Mon, 14 Apr 2025 13:43:21 -0700
Subject: [PATCH 3/9] Set different timeouts

---
 src/lib/components/gym-builder/OverviewTab.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/gym-builder/OverviewTab.svelte b/src/lib/components/gym-builder/OverviewTab.svelte
index aedbfbf..ed4e960 100644
--- a/src/lib/components/gym-builder/OverviewTab.svelte
+++ b/src/lib/components/gym-builder/OverviewTab.svelte
@@ -38,7 +38,8 @@
       if ((e as ApiError).status === 400) {
         showToast(
           'Error Saving Email',
-          'There was an error validating your email. Make sure you entered it correctly.'
+          'There was an error validating your email. Make sure you entered it correctly.',
+          { timeout: 4000 }
         );
         loading = false;
         return;
@@ -47,7 +48,7 @@
     showToast(
       'Email Saved',
       'You will now get email notifications when your gym runs out of funds!',
-      { timeout: 5000 }
+      { timeout: 4000 }
     );
     loading = false;
   }

From 740c2621abdce3b5eb97c67cc15238ca27005447 Mon Sep 17 00:00:00 2001
From: Morgan Dean <morgandeanhi@gmail.com>
Date: Mon, 14 Apr 2025 17:39:01 -0700
Subject: [PATCH 4/9] Add both leaderboards, wallet-based nicknames

---
 src/lib/api/endpoints/gym/leaderboards.ts     |  49 ++++
 src/lib/api/endpoints/wallet.ts               |  12 +
 src/lib/components/Sidebar.svelte             |   8 +-
 src/lib/components/WalletButton.svelte        |  44 ++-
 .../components/gym-builder/UploadsTab.svelte  | 259 ++++++++++--------
 .../components/modals/NicknameModal.svelte    |  41 +++
 src/lib/stores/wallet.ts                      |   1 +
 src/routes/app/+layout.svelte                 |   2 +-
 src/routes/app/gym/chat/+page.svelte          |   2 +-
 .../app/gym/history/recording/+page.svelte    |   2 +-
 src/routes/app/leaderboards/+page.svelte      | 244 +++++++++++++++++
 11 files changed, 526 insertions(+), 138 deletions(-)
 create mode 100644 src/lib/api/endpoints/gym/leaderboards.ts
 create mode 100644 src/lib/components/modals/NicknameModal.svelte
 create mode 100644 src/routes/app/leaderboards/+page.svelte

diff --git a/src/lib/api/endpoints/gym/leaderboards.ts b/src/lib/api/endpoints/gym/leaderboards.ts
new file mode 100644
index 0000000..32f31cc
--- /dev/null
+++ b/src/lib/api/endpoints/gym/leaderboards.ts
@@ -0,0 +1,49 @@
+import { apiClient } from '$lib/api';
+
+/**
+ * Get gym leaderboard data
+ * @returns Promise resolving to the leaderboard data
+ */
+export async function getLeaderboardData(): Promise<{
+  workersLeaderboard: {
+    rank: number;
+    address: string;
+    nickname?: string;
+    tasks: number;
+    rewards: number;
+  }[];
+  forgeLeaderboard: {
+    rank: number;
+    name: string;
+    tasks: number;
+    payout: number;
+  }[];
+  stats: {
+    totalWorkers: number;
+    tasksCompleted: number;
+    totalRewards: number;
+    activeForges: number;
+  };
+}> {
+  return apiClient.get<{
+    workersLeaderboard: {
+      rank: number;
+      address: string;
+      nickname?: string;
+      tasks: number;
+      rewards: number;
+    }[];
+    forgeLeaderboard: {
+      rank: number;
+      name: string;
+      tasks: number;
+      payout: number;
+    }[];
+    stats: {
+      totalWorkers: number;
+      tasksCompleted: number;
+      totalRewards: number;
+      activeForges: number;
+    };
+  }>('/gym/leaderboards');
+}
diff --git a/src/lib/api/endpoints/wallet.ts b/src/lib/api/endpoints/wallet.ts
index 91a4f28..7e29b90 100644
--- a/src/lib/api/endpoints/wallet.ts
+++ b/src/lib/api/endpoints/wallet.ts
@@ -14,3 +14,15 @@ export async function checkConnection(token: string): Promise<{
     address?: string;
   }>('/wallet/connection', { token });
 }
+
+/**
+ * Generate apps from a prompt
+ * @param prompt The prompt to generate apps from
+ * @returns Promise resolving to the generated content
+ */
+export async function getNickname(address: string): Promise<string> {
+  return apiClient.get<string>('/wallet/nickname', { address });
+}
+export async function setNickname(address: string, nickname: string): Promise<string> {
+  return apiClient.put<string>('/wallet/nickname', { address, nickname }, { requiresAuth: true });
+}
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index 72d9113..9f8bf32 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Dumbbell, Hammer, Square, LoaderCircle } from 'lucide-svelte';
+  import { Dumbbell, Hammer, Square, LoaderCircle, Trophy } from 'lucide-svelte';
   import { page } from '$app/state';
   import logo from '$lib/assets/Logo_Icon.png';
   import WalletButton from './WalletButton.svelte';
@@ -9,8 +9,8 @@
   import { recordingState } from '$lib/stores/recording';
 
   const earnButtons = [
-    { path: '/app/gym', icon: Dumbbell, label: 'Gym' }
-    // { path: "/app/node", icon: Server, label: "Node" },
+    { path: '/app/gym', icon: Dumbbell, label: 'Gym' },
+    { path: '/app/leaderboards', icon: Trophy, label: 'Loaderboards' }
   ];
 
   const spendButtons = [
@@ -70,7 +70,7 @@
         {@const Icon = button.icon}
         <a
           href={button.path}
-          class="w-full py-2 flex justify-center rounded-full transition-colors {page.url.pathname.split(
+          class="w-full my-1 py-2 flex justify-center rounded-full transition-colors {page.url.pathname.split(
             '/'
           )[2] == button.path.split('/')[2]
             ? 'bg-secondary-300 text-white'
diff --git a/src/lib/components/WalletButton.svelte b/src/lib/components/WalletButton.svelte
index 1afdfef..cd49c5c 100644
--- a/src/lib/components/WalletButton.svelte
+++ b/src/lib/components/WalletButton.svelte
@@ -4,18 +4,25 @@
     isConnecting,
     getConnectionUrl,
     startPolling,
-    disconnectWallet
+    disconnectWallet,
+    nickname
   } from '$lib/stores/wallet';
 
-  export let variant: 'compact' | 'large' = 'compact';
-  export let theme: 'dark' | 'light' = 'dark';
   import { LogOut, Wallet, ExternalLink, Coins } from 'lucide-svelte';
   import { onMount } from 'svelte';
   import { getBalance, listSubmissions } from '$lib/api/endpoints/forge';
   import type { SubmissionStatus } from '$lib/types/forge';
+  import { getNickname } from '$lib/api/endpoints/wallet';
+  import NicknameModal from './modals/NicknameModal.svelte';
 
-  let viralBalance = 0;
-  let recentSubmissions: SubmissionStatus[] = [];
+  const {
+    variant = 'compact',
+    theme = 'dark'
+  }: { variant?: 'compact' | 'large'; theme?: 'dark' | 'light' } = $props();
+
+  let viralBalance = $state(0);
+  let nickNameModalOpen = $state(false);
+  let recentSubmissions: SubmissionStatus[] = $state([]);
 
   function formatNumber(num: number): string {
     return num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
@@ -45,16 +52,20 @@
 
   onMount(async () => {
     if ($walletAddress) {
-      getBalance($walletAddress);
+      viralBalance = await getBalance($walletAddress);
+      $nickname = await getNickname($walletAddress);
       loadSubmissions();
     }
   });
 
   // Subscribe to wallet address changes
-  $: if ($walletAddress) {
-    getBalance($walletAddress);
-    loadSubmissions();
-  }
+  walletAddress.subscribe(async (address) => {
+    if (address) {
+      viralBalance = await getBalance(address);
+      $nickname = await getNickname(address);
+      loadSubmissions();
+    }
+  });
 </script>
 
 {#if $walletAddress}
@@ -84,6 +95,17 @@
           <span class="text-gray-400">Wallet</span>
           <span class="font-mono">{$walletAddress.slice(0, 4)}...{$walletAddress.slice(-4)}</span>
         </div>
+        <!-- Nickname -->
+        <div class="flex justify-between items-center">
+          <span class="text-gray-400">Nickname</span>
+          <button
+            onclick={() => (nickNameModalOpen = true)}
+            class=" {$nickname
+              ? ''
+              : 'text-gray-500'} font-semibold hover:text-white transition-all hover:underline">
+            {$nickname || 'Set Your Nickname'}
+          </button>
+        </div>
 
         <!-- Balance -->
         <div class="flex justify-between items-center">
@@ -166,3 +188,5 @@
     {/if}
   </a>
 {/if}
+
+<NicknameModal bind:open={nickNameModalOpen} oldNick={$nickname} />
diff --git a/src/lib/components/gym-builder/UploadsTab.svelte b/src/lib/components/gym-builder/UploadsTab.svelte
index d7da20d..3178dcd 100644
--- a/src/lib/components/gym-builder/UploadsTab.svelte
+++ b/src/lib/components/gym-builder/UploadsTab.svelte
@@ -1,7 +1,17 @@
 <script lang="ts">
   import Card from '$lib/components/Card.svelte';
   import DownloadScriptsModal from '$lib/components/modals/DownloadScriptsModal.svelte';
-  import { Code, Download, Clock, Monitor, Laptop, Server, Smartphone, Globe, Info } from 'lucide-svelte';
+  import {
+    Code,
+    Download,
+    Clock,
+    Monitor,
+    Laptop,
+    Server,
+    Smartphone,
+    Globe,
+    Info
+  } from 'lucide-svelte';
   import type { TrainingPool, PoolSubmission } from '$lib/types/forge';
   import { getPoolSubmissions } from '$lib/api/endpoints/forge';
   import { onMount } from 'svelte';
@@ -199,142 +209,149 @@
       </button>
     </div>
   {:else}
-<div class="overflow-x-auto overflow-y-visible">
-  <table class="min-w-full divide-y divide-gray-200 relative">
-      <thead class="bg-gray-50">
-        <tr>
-          <th class="w-10 px-3 py-3">
-            <div class="flex items-center">
-              <input
-                type="checkbox"
-                class="h-4 w-4 text-secondary-600 focus:ring-secondary-500 border-gray-300 rounded cursor-pointer"
-                checked={allSelected}
-                onchange={toggleSelectAll}
-                disabled={submissions.length === 0} />
-            </div>
-          </th>
-          <th class="w-16 px-2 py-3"></th>
-          <th
-            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-            Task
-          </th>
-          <th
-            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-            Status
-          </th>
-          <th
-            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-            Duration
-          </th>
-          <th
-            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-            File Size
-          </th>
-          <th
-            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-            Quality
-          </th>
-          <th
-            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-            Reward
-          </th>
-        </tr>
-      </thead>
-      <tbody class="bg-white divide-y divide-gray-200">
-        {#each submissions as submission}
-          <tr class={selectedSubmissions.has(submission._id) ? 'bg-secondary-50' : ''}>
-            <td class="px-3 py-4 whitespace-nowrap">
+    <div class="overflow-x-auto overflow-y-visible">
+      <table class="min-w-full divide-y divide-gray-200 relative">
+        <thead class="bg-gray-50">
+          <tr>
+            <th class="w-10 px-3 py-3">
               <div class="flex items-center">
                 <input
                   type="checkbox"
                   class="h-4 w-4 text-secondary-600 focus:ring-secondary-500 border-gray-300 rounded cursor-pointer"
-                  checked={selectedSubmissions.has(submission._id)}
-                  onchange={() => toggleSelection(submission._id)} />
+                  checked={allSelected}
+                  onchange={toggleSelectAll}
+                  disabled={submissions.length === 0} />
               </div>
-            </td>
-            <td class="px-2 py-4 whitespace-nowrap text-gray-500">
-              <div class="flex items-center gap-2">
-                <!-- <span class="flex items-center gap-1 bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded text-xs font-mono">
+            </th>
+            <th class="w-16 px-2 py-3"></th>
+            <th
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Task
+            </th>
+            <th
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Status
+            </th>
+            <th
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Duration
+            </th>
+            <th
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              File Size
+            </th>
+            <th
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Quality
+            </th>
+            <th
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Reward
+            </th>
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+          {#each submissions as submission}
+            <tr class={selectedSubmissions.has(submission._id) ? 'bg-secondary-50' : ''}>
+              <td class="px-3 py-4 whitespace-nowrap">
+                <div class="flex items-center">
+                  <input
+                    type="checkbox"
+                    class="h-4 w-4 text-secondary-600 focus:ring-secondary-500 border-gray-300 rounded cursor-pointer"
+                    checked={selectedSubmissions.has(submission._id)}
+                    onchange={() => toggleSelection(submission._id)} />
+                </div>
+              </td>
+              <td class="px-2 py-4 whitespace-nowrap text-gray-500">
+                <div class="flex items-center gap-2">
+                  <!-- <span class="flex items-center gap-1 bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded text-xs font-mono">
                   <Languages size={10} class="text-gray-500" />
                   {getLocaleCode(submission)}
                 </span> -->
+                  <span
+                    class="flex items-center gap-1 bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded text-xs font-mono">
+                    <svelte:component
+                      this={getOSIcon(submission)}
+                      size={10}
+                      class="text-gray-500" />
+                    {getPlatformLabel(submission)}
+                  </span>
+                </div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                {getTitle(submission)}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
                 <span
-                  class="flex items-center gap-1 bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded text-xs font-mono">
-                  <svelte:component this={getOSIcon(submission)} size={10} class="text-gray-500" />
-                  {getPlatformLabel(submission)}
-                </span>
-              </div>
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-              {getTitle(submission)}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap">
-              <span
-                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
+                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                 {submission.status === 'completed'
-                  ? 'bg-green-100 text-green-800'
-                  : submission.status === 'failed'
-                    ? 'bg-red-100 text-red-800'
-                    : 'bg-yellow-100 text-yellow-800'}">
-                {submission.status}
-              </span>
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-              <div class="flex items-center space-x-1">
-                <Clock size={14} class="text-gray-400" />
-                <span>{formatDuration(submission)}</span>
-              </div>
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-              {getTotalFileSize(submission)}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm">
-              {#if submission.grade_result?.score}
-                <span class="{submission.grade_result.score >= 50 
-                  ? 'text-green-600 font-semibold' 
-                  : submission.grade_result.score >= 25 
-                    ? 'text-yellow-600 font-semibold' 
-                    : 'text-red-600 font-semibold'}">
-                  {submission.grade_result.score}%
+                    ? 'bg-green-100 text-green-800'
+                    : submission.status === 'failed'
+                      ? 'bg-red-100 text-red-800'
+                      : 'bg-yellow-100 text-yellow-800'}">
+                  {submission.status}
                 </span>
-              {:else}
-                <span class="text-gray-500">-</span>
-              {/if}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-              {#if submission.reward && submission.reward > 0}
-                {submission.reward} VIRAL
-              {:else}
-                <div class="flex items-center gap-1">
-                  <span class="text-gray-500">FREE</span>
-                  {#if submission.grade_result?.reasoning}
-                    <div class="relative group">
-                      <Info size={14} class="text-gray-400" />
-                      <div class="absolute right-0 bottom-full mb-2 w-64 bg-gray-900 text-white text-xs rounded p-2 shadow-lg opacity-0 group-hover:opacity-100 transition-opacity z-10 pointer-events-none whitespace-normal break-words">
-                        {(submission.grade_result.reasoning.match(/\(\s*system:\s*(.*?)\s*\)/) || ['', ''])[1]}
-                      </div>
-                    </div>
-                  {/if}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                <div class="flex items-center space-x-1">
+                  <Clock size={14} class="text-gray-400" />
+                  <span>{formatDuration(submission)}</span>
                 </div>
-              {/if}
-            </td>
-          </tr>
-        {/each}
-        {#if submissions.length === 0}
-          <tr>
-            <td colspan="7" class="px-6 py-8 text-center text-gray-500">
-              No submissions yet. Submissions will appear here when users upload demonstrations.
-            </td>
-          </tr>
-        {/if}
-      </tbody>
-    </table>
-  </div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                {getTotalFileSize(submission)}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm">
+                {#if submission.grade_result?.score}
+                  <span
+                    class={submission.grade_result.score >= 50
+                      ? 'text-green-600 font-semibold'
+                      : submission.grade_result.score >= 25
+                        ? 'text-yellow-600 font-semibold'
+                        : 'text-red-600 font-semibold'}>
+                    {submission.grade_result.score}%
+                  </span>
+                {:else}
+                  <span class="text-gray-500">-</span>
+                {/if}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                {#if submission.reward && submission.reward > 0}
+                  {submission.reward} VIRAL
+                {:else}
+                  <div class="flex items-center gap-1">
+                    <span class="text-gray-500">FREE</span>
+                    {#if submission.grade_result?.reasoning}
+                      <div class="relative group">
+                        <Info size={14} class="text-gray-400" />
+                        <div
+                          class="absolute right-0 bottom-full mb-2 w-64 bg-gray-900 text-white text-xs rounded p-2 shadow-lg opacity-0 group-hover:opacity-100 transition-opacity z-10 pointer-events-none whitespace-normal break-words">
+                          {(submission.grade_result.reasoning.match(
+                            /\(\s*system:\s*(.*?)\s*\)/
+                          ) || ['', ''])[1]}
+                        </div>
+                      </div>
+                    {/if}
+                  </div>
+                {/if}
+              </td>
+            </tr>
+          {/each}
+          {#if submissions.length === 0}
+            <tr>
+              <td colspan="7" class="px-6 py-8 text-center text-gray-500">
+                No submissions yet. Submissions will appear here when users upload demonstrations.
+              </td>
+            </tr>
+          {/if}
+        </tbody>
+      </table>
+    </div>
   {/if}
 </Card>
 
 <DownloadScriptsModal
-  open={showDownloadModal}
+  bind:open={showDownloadModal}
   submissions={selectedCount > 0
     ? submissions.filter((s) => selectedSubmissions.has(s._id))
     : submissions}
diff --git a/src/lib/components/modals/NicknameModal.svelte b/src/lib/components/modals/NicknameModal.svelte
new file mode 100644
index 0000000..0be2244
--- /dev/null
+++ b/src/lib/components/modals/NicknameModal.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import Button from '$lib/components/form/Button.svelte';
+  import { setNickname } from '$lib/api/endpoints/wallet';
+  import { walletAddress, nickname } from '$lib/stores';
+  import Input from '../form/Input.svelte';
+  import { onMount } from 'svelte';
+
+  let newNick = $state('');
+
+  let { open = $bindable(false), oldNick }: { open: boolean; oldNick?: string } = $props();
+  onMount(() => {
+    if (oldNick) newNick = oldNick;
+  });
+  const onCancel = async () => {
+    open = false;
+  };
+  const onConfirm = async () => {
+    open = false;
+    if (newNick && $walletAddress) {
+      oldNick = newNick;
+      $nickname = await setNickname($walletAddress, newNick);
+    }
+  };
+</script>
+
+{#if open}
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+    <div class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
+      <h2 class="text-xl font-semibold mb-4">Set Nickname</h2>
+      <p class="text-gray-700 mb-2">
+        Set your nickname to be displayed on the demonstrator leaderboard.
+      </p>
+      <p class="text-gray-500 mb-2">Maximum length of 25 characters. Make it memorable!</p>
+      <Input type="text" bind:value={newNick} variant="light" placeholder="JohnDoe23" />
+      <div class="flex justify-end gap-3 mt-6">
+        <Button variant="secondary" onclick={onCancel}>Cancel</Button>
+        <Button variant="primary" onclick={onConfirm}>Save</Button>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/src/lib/stores/wallet.ts b/src/lib/stores/wallet.ts
index d15624e..5e8ae75 100644
--- a/src/lib/stores/wallet.ts
+++ b/src/lib/stores/wallet.ts
@@ -10,6 +10,7 @@ const storedToken =
   typeof localStorage !== 'undefined' ? localStorage.getItem('connectionToken') : null;
 
 export const walletAddress = writable<string | null>(storedAddress);
+export const nickname = writable<string | undefined>('');
 export const connectionToken = writable<string | null>(storedToken);
 export const isConnecting = writable(false);
 
diff --git a/src/routes/app/+layout.svelte b/src/routes/app/+layout.svelte
index 3636940..5536303 100644
--- a/src/routes/app/+layout.svelte
+++ b/src/routes/app/+layout.svelte
@@ -128,7 +128,7 @@
   retry={async () => {
     invoke('init_tools');
   }}
-  open={showInitToolsError} />
+  bind:open={showInitToolsError} />
 
 <style>
   :global(html, body) {
diff --git a/src/routes/app/gym/chat/+page.svelte b/src/routes/app/gym/chat/+page.svelte
index c0b92c7..77bfe30 100644
--- a/src/routes/app/gym/chat/+page.svelte
+++ b/src/routes/app/gym/chat/+page.svelte
@@ -1502,4 +1502,4 @@
   </div>
 </div> -->
 
-<UploadConfirmModal uploader={handleUploadClick} open={showUploadConfirmModal} />
+<UploadConfirmModal uploader={handleUploadClick} bind:open={showUploadConfirmModal} />
diff --git a/src/routes/app/gym/history/recording/+page.svelte b/src/routes/app/gym/history/recording/+page.svelte
index 139cd90..0423ec2 100644
--- a/src/routes/app/gym/history/recording/+page.svelte
+++ b/src/routes/app/gym/history/recording/+page.svelte
@@ -1253,4 +1253,4 @@
   </div>
 </div>
 
-<UploadConfirmModal open={showUploadConfirmModal} uploader={handleUploadClick} />
+<UploadConfirmModal bind:open={showUploadConfirmModal} uploader={handleUploadClick} />
diff --git a/src/routes/app/leaderboards/+page.svelte b/src/routes/app/leaderboards/+page.svelte
new file mode 100644
index 0000000..4f6c7e8
--- /dev/null
+++ b/src/routes/app/leaderboards/+page.svelte
@@ -0,0 +1,244 @@
+<script lang="ts">
+  import { getLeaderboardData } from '$lib/api/endpoints/gym/leaderboards';
+  import Card from '$lib/components/Card.svelte';
+  import NicknameModal from '$lib/components/modals/NicknameModal.svelte';
+  import { nickname } from '$lib/stores';
+  import { Users, Zap, Hammer, DollarSign, Check, LoaderCircle } from 'lucide-svelte';
+  import { onMount } from 'svelte';
+
+  // State management
+  let loading = $state(true);
+  let openNickModal = $state(false);
+  let activeTab = $state('workers');
+  let totalWorkers = $state(0);
+  let tasksCompleted = $state(0);
+  let totalRewards = $state(0);
+  let activeForges = $state(0);
+
+  // Mock data for the leaderboard with SOL addresses and some nicknames (reduced)
+  let topWorkers: {
+    rank: number;
+    address: string;
+    nickname?: string;
+    tasks: number;
+    rewards: number;
+  }[] = $state([]);
+
+  let topForges: {
+    rank: number;
+    name: string;
+    tasks: number;
+    payout: number;
+  }[] = $state([]);
+
+  onMount(async () => {
+    const res = await getLeaderboardData();
+    topWorkers = res.workersLeaderboard;
+    topForges = res.forgeLeaderboard;
+    totalWorkers = res.stats.totalWorkers;
+    totalRewards = res.stats.totalRewards;
+    tasksCompleted = res.stats.tasksCompleted;
+    activeForges = res.stats.activeForges;
+    loading = false;
+  });
+
+  // Leaderboard data to display based on active tab and view mode
+  const leaderboardData = $derived(
+    activeTab === 'workers'
+      ? topWorkers.map((worker) => ({
+          ...worker
+        }))
+      : topForges.map((forge) => ({
+          ...forge
+        }))
+  );
+
+  // Helper functions
+  const formatCurrency = (value: number) => {
+    return value.toFixed(2);
+  };
+
+  const truncateAddress = (address: string) => {
+    if (!address) return '';
+    return address.slice(0, 6) + '...' + address.slice(-6);
+  };
+</script>
+
+<div class="p-2 sm:p-4">
+  <div class="max-w-7xl mx-auto mb-6">
+    <div class="flex justify-between items-center">
+      <h2 class="text-2xl font-title text-blac">Leaderboards</h2>
+    </div>
+
+    <!-- Tab Navigation -->
+    <div class="border-b border-accent-400 mt-5">
+      <div class="flex -mb-px">
+        <button
+          class="py-3 px-6 font-title flex gap-2 transition border-b-2 {activeTab === 'workers'
+            ? 'border-secondary-300 text-secondary-300'
+            : 'border-transparent text-accent-600 hover:text-primary-300'}"
+          onclick={() => (activeTab = 'workers')}>
+          <Users class="w-5 h-5" />
+          Top Demonstrators
+        </button>
+        <button
+          class="py-3 px-6 font-title flex gap-2 border-b-2 {activeTab === 'forges'
+            ? 'border-secondary-300 text-secondary-300'
+            : 'border-transparent text-accent-600 hover:text-primary-300'}"
+          onclick={() => (activeTab = 'forges')}>
+          <Hammer class="w-5 h-5" />
+          Top Forges
+        </button>
+      </div>
+    </div>
+
+    {#if !loading}
+      <div class="mb-8 mt-2">
+        <!-- Leaderboard Table -->
+        <Card padding="none">
+          <div class="grid grid-cols-12 px-6 py-4 bg-accent-200 text-accent-600 text-sm">
+            <div class="col-span-1">Rank</div>
+            <div class="col-span-6">
+              {activeTab === 'workers' ? 'Address' : 'Name'}
+            </div>
+            <div class="col-span-5 grid grid-cols-2 text-right">
+              <div class="col-span-1">
+                {#if activeTab === 'workers'}
+                  Tasks Completed
+                {:else}
+                  Tasks Created
+                {/if}
+              </div>
+              <div class="col-span-1">
+                {#if activeTab === 'workers'}
+                  $VIRAL Rewards Earned
+                {:else}
+                  $VIRAL Paid Out
+                {/if}
+              </div>
+            </div>
+          </div>
+
+          <div class="max-h-[50vh] overflow-y-auto">
+            {#each leaderboardData as item, index}
+              <div
+                class="grid grid-cols-12 px-6 py-4 {index !== leaderboardData.length - 1
+                  ? 'border-b border-accent-400'
+                  : ''} {index % 2 === 0 ? 'bg-accent-100' : 'bg-accent-200'}">
+                <div class="col-span-1">
+                  <div
+                    class="w-8 h-8 rounded-full flex items-center justify-center {item.rank <= 3
+                      ? 'text-accent-100 ' +
+                        (item.rank === 1
+                          ? 'bg-yellow-500'
+                          : item.rank === 2
+                            ? 'bg-accent-500'
+                            : 'bg-amber-700')
+                      : 'bg-accent-400 text-primary-300'}">
+                    {item.rank}
+                  </div>
+                </div>
+
+                <!-- Address/Name column -->
+                <div class="col-span-6 flex items-center">
+                  {#if activeTab === 'workers' && 'address' in item}
+                    <div class="flex flex-col">
+                      <span class="font-medium text-primary-100 font-mono text-xs">
+                        {truncateAddress(item.address)}
+                      </span>
+                      {#if item.nickname}
+                        <span class="text-xs text-secondary-300">
+                          {item.nickname}
+                        </span>
+                      {/if}
+                    </div>
+                  {:else if 'name' in item}
+                    <span class="font-medium text-primary-100">{item.name}</span>
+                  {/if}
+                </div>
+
+                <!-- Value column -->
+                <div class="col-span-5 grid grid-cols-2 text-right">
+                  <div class="col-span-1 flex items-center justify-end">
+                    <div class="flex items-center">
+                      <span
+                        class="text-sm font-semibold bg-secondary-600/30 px-2 py-0.5 rounded-lg text-secondary-600">
+                        {item.tasks}
+                        Tasks
+                      </span>
+                    </div>
+                  </div>
+                  <div class="col-span-1 flex items-center justify-end">
+                    <div class="flex items-center">
+                      <span
+                        class="text-sm bg-secondary-300/30 font-semibold bg-opacity-20 px-2 py-0.5 rounded-lg text-secondary-300">
+                        {#if 'address' in item}
+                          {formatCurrency(item.rewards)} $VIRAL
+                        {:else}
+                          {formatCurrency(item.payout)} $VIRAL
+                        {/if}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            {/each}
+          </div>
+        </Card>
+        <button
+          onclick={() => (openNickModal = true)}
+          class="text-gray-600 ml-2 text-xs italic hover:underline transition-all">
+          Set your leaderboard nickname.
+        </button>
+      </div>
+
+      <!-- Global Stats Section -->
+      <div class="mt-12">
+        <h2 class="text-xl font-title text-primary-100 mb-6 flex items-center">
+          <Zap class="text-secondary-100 mr-2" size={20} />
+          Global Statistics
+        </h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <Card>
+            <div class="flex justify-between items-center mb-2">
+              <span class="text-primary-300 text-sm">Total Demonstrators</span>
+              <Users size={16} class="text-secondary-600" />
+            </div>
+            <div class="text-2xl font-title text-primary-100">{totalWorkers}</div>
+          </Card>
+          <Card>
+            <div class="flex justify-between items-center mb-2">
+              <span class="text-primary-300 text-sm">Total Tasks Completed</span>
+              <Check size={16} class="text-secondary-600" />
+            </div>
+            <div class="text-2xl font-title text-primary-100 flex items-center">
+              {tasksCompleted}
+            </div>
+          </Card>
+          <Card>
+            <div class="flex justify-between items-center mb-2">
+              <span class="text-primary-300 text-sm">Total Paid Out</span>
+              <DollarSign size={16} class="text-secondary-600" />
+            </div>
+            <div class="text-2xl font-title text-primary-100 flex items-center">
+              {formatCurrency(totalRewards)} $VIRAL
+            </div>
+          </Card>
+          <Card>
+            <div class="flex justify-between items-center mb-2">
+              <span class="text-primary-300 text-sm">Active Forges</span>
+              <Hammer size={16} class="text-secondary-600" />
+            </div>
+            <div class="text-2xl font-title text-primary-100">{activeForges}</div>
+          </Card>
+        </div>
+      </div>
+    {:else}
+      <div class="mx-auto w-full mt-10">
+        <LoaderCircle class="animate-spin mx-auto text-secondary-300 w-16 h-16" />
+      </div>
+    {/if}
+  </div>
+</div>
+
+<NicknameModal bind:open={openNickModal} oldNick={$nickname} />

From e3655ee95e13b2946be00c6145337d37a3542974 Mon Sep 17 00:00:00 2001
From: Morgan Dean <morgandeanhi@gmail.com>
Date: Sat, 19 Apr 2025 13:34:12 -0700
Subject: [PATCH 5/9] add verbose logging to windows build

---
 .github/workflows/build.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 8486156..a76b578 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -20,7 +20,7 @@ jobs:
           - platform: 'ubuntu-22.04'
             args: ''
           - platform: 'windows-latest'
-            args: ''
+            args: '--verbose'
           - platform: 'windows-latest'
             args: '--target aarch64-pc-windows-msvc'
 

From 15e9c221712022d030ac9594a8cfb15216aac515 Mon Sep 17 00:00:00 2001
From: Morgan Dean <morgandeanhi@gmail.com>
Date: Sat, 19 Apr 2025 17:08:31 -0700
Subject: [PATCH 6/9] Remove verbose flag for windows builds

---
 .github/workflows/build.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index a76b578..8486156 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -20,7 +20,7 @@ jobs:
           - platform: 'ubuntu-22.04'
             args: ''
           - platform: 'windows-latest'
-            args: '--verbose'
+            args: ''
           - platform: 'windows-latest'
             args: '--target aarch64-pc-windows-msvc'
 

From d447d6f41030d9b8bd52345c1a9052c700c25307 Mon Sep 17 00:00:00 2001
From: Morgan Dean <morgandeanhi@gmail.com>
Date: Sun, 20 Apr 2025 13:36:09 -0700
Subject: [PATCH 7/9] Add average grade & sorting to leaderboards

---
 src/lib/api/endpoints/gym/leaderboards.ts |  2 +
 src/lib/components/Sidebar.svelte         |  4 +-
 src/routes/app/leaderboards/+page.svelte  | 69 ++++++++++++++++-------
 3 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/src/lib/api/endpoints/gym/leaderboards.ts b/src/lib/api/endpoints/gym/leaderboards.ts
index 32f31cc..6f40ed1 100644
--- a/src/lib/api/endpoints/gym/leaderboards.ts
+++ b/src/lib/api/endpoints/gym/leaderboards.ts
@@ -11,6 +11,7 @@ export async function getLeaderboardData(): Promise<{
     nickname?: string;
     tasks: number;
     rewards: number;
+    avgScore: number;
   }[];
   forgeLeaderboard: {
     rank: number;
@@ -32,6 +33,7 @@ export async function getLeaderboardData(): Promise<{
       nickname?: string;
       tasks: number;
       rewards: number;
+      avgScore: number;
     }[];
     forgeLeaderboard: {
       rank: number;
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index 9f8bf32..969677d 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -10,7 +10,7 @@
 
   const earnButtons = [
     { path: '/app/gym', icon: Dumbbell, label: 'Gym' },
-    { path: '/app/leaderboards', icon: Trophy, label: 'Loaderboards' }
+    { path: '/app/leaderboards', icon: Trophy, label: 'Leaderboards' }
   ];
 
   const spendButtons = [
@@ -39,7 +39,7 @@
   }
 </script>
 
-<div class="w-16 flex flex-col bg-transparent py-2 pl-2 space-y-4">
+<div class="w-16 flex flex-col bg-transparent pt-2 pb-6 pl-2 space-y-4">
   <div class="flex-start grow flex flex-col gap-2">
     <div class="my-4 flex justify-center">
       <img src={logo} alt="ViralMind Logo" class="h-8 w-8 object-contain" />
diff --git a/src/routes/app/leaderboards/+page.svelte b/src/routes/app/leaderboards/+page.svelte
index 4f6c7e8..d3c15bc 100644
--- a/src/routes/app/leaderboards/+page.svelte
+++ b/src/routes/app/leaderboards/+page.svelte
@@ -2,7 +2,7 @@
   import { getLeaderboardData } from '$lib/api/endpoints/gym/leaderboards';
   import Card from '$lib/components/Card.svelte';
   import NicknameModal from '$lib/components/modals/NicknameModal.svelte';
-  import { nickname } from '$lib/stores';
+  import { nickname, walletAddress } from '$lib/stores';
   import { Users, Zap, Hammer, DollarSign, Check, LoaderCircle } from 'lucide-svelte';
   import { onMount } from 'svelte';
 
@@ -22,6 +22,7 @@
     nickname?: string;
     tasks: number;
     rewards: number;
+    avgScore: number;
   }[] = $state([]);
 
   let topForges: {
@@ -45,12 +46,16 @@
   // Leaderboard data to display based on active tab and view mode
   const leaderboardData = $derived(
     activeTab === 'workers'
-      ? topWorkers.map((worker) => ({
-          ...worker
-        }))
-      : topForges.map((forge) => ({
-          ...forge
-        }))
+      ? topWorkers
+          .map((worker) => ({
+            ...worker
+          }))
+          .sort((a, b) => b.avgScore - a.avgScore)
+      : topForges
+          .map((forge) => ({
+            ...forge
+          }))
+          .sort((a, b) => b.payout - a.payout)
   );
 
   // Helper functions
@@ -98,10 +103,15 @@
         <Card padding="none">
           <div class="grid grid-cols-12 px-6 py-4 bg-accent-200 text-accent-600 text-sm">
             <div class="col-span-1">Rank</div>
-            <div class="col-span-6">
+            <div class="col-span-5">
               {activeTab === 'workers' ? 'Address' : 'Name'}
             </div>
-            <div class="col-span-5 grid grid-cols-2 text-right">
+            <div class="col-span-6 grid grid-cols-3 text-center">
+              <div class="col-span-1">
+                {#if activeTab === 'workers'}
+                  Average Grade
+                {/if}
+              </div>
               <div class="col-span-1">
                 {#if activeTab === 'workers'}
                   Tasks Completed
@@ -111,9 +121,9 @@
               </div>
               <div class="col-span-1">
                 {#if activeTab === 'workers'}
-                  $VIRAL Rewards Earned
+                  $VIRAL Rewards
                 {:else}
-                  $VIRAL Paid Out
+                  $VIRAL Paid
                 {/if}
               </div>
             </div>
@@ -140,7 +150,7 @@
                 </div>
 
                 <!-- Address/Name column -->
-                <div class="col-span-6 flex items-center">
+                <div class="col-span-5 flex items-center">
                   {#if activeTab === 'workers' && 'address' in item}
                     <div class="flex flex-col">
                       <span class="font-medium text-primary-100 font-mono text-xs">
@@ -150,6 +160,12 @@
                         <span class="text-xs text-secondary-300">
                           {item.nickname}
                         </span>
+                      {:else if item.address === $walletAddress}
+                        <button
+                          onclick={() => (openNickModal = true)}
+                          class="text-xs -ml-2 text-secondary-500 hover:underline">
+                          set your nickname
+                        </button>
                       {/if}
                     </div>
                   {:else if 'name' in item}
@@ -158,8 +174,18 @@
                 </div>
 
                 <!-- Value column -->
-                <div class="col-span-5 grid grid-cols-2 text-right">
-                  <div class="col-span-1 flex items-center justify-end">
+                <div class="col-span-6 grid grid-cols-3 text-right">
+                  <div class="col-span-1 flex items-center justify-center">
+                    {#if activeTab === 'workers' && 'avgScore' in item}
+                      <div class="flex items-center">
+                        <span
+                          class="text-sm bg-green-500/30 font-semibold bg-opacity-20 px-2 py-0.5 rounded-lg text-green-600">
+                          {Math.floor(item.avgScore)}%
+                        </span>
+                      </div>
+                    {/if}
+                  </div>
+                  <div class="col-span-1 flex items-center justify-center">
                     <div class="flex items-center">
                       <span
                         class="text-sm font-semibold bg-secondary-600/30 px-2 py-0.5 rounded-lg text-secondary-600">
@@ -168,7 +194,7 @@
                       </span>
                     </div>
                   </div>
-                  <div class="col-span-1 flex items-center justify-end">
+                  <div class="col-span-1 flex items-center justify-center">
                     <div class="flex items-center">
                       <span
                         class="text-sm bg-secondary-300/30 font-semibold bg-opacity-20 px-2 py-0.5 rounded-lg text-secondary-300">
@@ -185,11 +211,14 @@
             {/each}
           </div>
         </Card>
-        <button
-          onclick={() => (openNickModal = true)}
-          class="text-gray-600 ml-2 text-xs italic hover:underline transition-all">
-          Set your leaderboard nickname.
-        </button>
+        <p
+          class="text-gray-600 mt-1 mr-1 float-right text-xs italic hover:underline transition-all">
+          {#if activeTab === 'workers'}
+            Sorted by Average Grade
+          {:else}
+            Sorted by $VIRAL Paid Out
+          {/if}
+        </p>
       </div>
 
       <!-- Global Stats Section -->

From b7bc8dd775b3f4a558da3906a744599f7d0530e9 Mon Sep 17 00:00:00 2001
From: Morgan Dean <morgandeanhi@gmail.com>
Date: Fri, 25 Apr 2025 11:38:50 -0700
Subject: [PATCH 8/9] Fix ranking, dollar amount formatting for leaderboards

---
 src/routes/app/leaderboards/+page.svelte | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/routes/app/leaderboards/+page.svelte b/src/routes/app/leaderboards/+page.svelte
index d3c15bc..474fa01 100644
--- a/src/routes/app/leaderboards/+page.svelte
+++ b/src/routes/app/leaderboards/+page.svelte
@@ -60,7 +60,10 @@
 
   // Helper functions
   const formatCurrency = (value: number) => {
-    return value.toFixed(2);
+    return value.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    });
   };
 
   const truncateAddress = (address: string) => {
@@ -137,15 +140,15 @@
                   : ''} {index % 2 === 0 ? 'bg-accent-100' : 'bg-accent-200'}">
                 <div class="col-span-1">
                   <div
-                    class="w-8 h-8 rounded-full flex items-center justify-center {item.rank <= 3
+                    class="w-8 h-8 rounded-full flex items-center justify-center {index <= 2
                       ? 'text-accent-100 ' +
-                        (item.rank === 1
+                        (index === 0
                           ? 'bg-yellow-500'
-                          : item.rank === 2
+                          : index === 1
                             ? 'bg-accent-500'
                             : 'bg-amber-700')
                       : 'bg-accent-400 text-primary-300'}">
-                    {item.rank}
+                    {index}
                   </div>
                 </div>
 

From 31154a9426ad9e47943cc1ff696c6794fe34339e Mon Sep 17 00:00:00 2001
From: Morgan Dean <morgandeanhi@gmail.com>
Date: Fri, 25 Apr 2025 11:27:44 -0700
Subject: [PATCH 9/9] Bump Version: 0.1.4

---
 package.json              | 2 +-
 src-tauri/Cargo.lock      | 2 +-
 src-tauri/Cargo.toml      | 2 +-
 src-tauri/tauri.conf.json | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 51e241e..13bc858 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "viralmind-desktop",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "",
   "type": "module",
   "scripts": {
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 69bded7..6ac619e 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -6597,7 +6597,7 @@ checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
 
 [[package]]
 name = "viralmind-desktop"
-version = "0.1.3"
+version = "0.1.4"
 dependencies = [
  "app-finder",
  "base64 0.21.7",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 970faee..f980060 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "viralmind-desktop"
-version = "0.1.3"
+version = "0.1.4"
 description = "The Viralmind desktop app."
 authors = ["Dillon DuPont", "Morgan Dean"]
 edition = "2021"
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index f06e64d..afe5a6e 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Viralmind Desktop",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "identifier": "ai.viralmind.desktop",
   "build": {
     "beforeDevCommand": "bun run dev",