From 3009e72920b6dec1859291a4ee88ae0daade0e39 Mon Sep 17 00:00:00 2001
From: Will Kennedy <will.n.kennedy@gmail.com>
Date: Wed, 20 Nov 2024 11:19:02 -0500
Subject: [PATCH] Add chart.js and vue-chartjs integration

Updated StatsGrid.vue to include chart.js for error logs visualization. Enhanced theming and accessibility across several components, fixed the error page styling, and updated `vite.config.js` for better build configuration.
---
 sologger-ui/error.html                   |  63 ++++----
 sologger-ui/package-lock.json            |  30 ++++
 sologger-ui/package.json                 |   2 +
 sologger-ui/src/App.vue                  |  12 +-
 sologger-ui/src/components/LogsTable.vue |   3 +-
 sologger-ui/src/components/StatsGrid.vue | 107 +++++++++++--
 sologger-ui/src/style.css                | 108 +++++--------
 sologger-ui/src/views/AboutView.vue      |  25 ++-
 sologger-ui/src/views/ConvertView.vue    | 188 ++++++++++++++++++++++-
 sologger-ui/src/views/HomeView.vue       |  49 +++---
 sologger-ui/vite.config.js               |  26 ++--
 11 files changed, 439 insertions(+), 174 deletions(-)

diff --git a/sologger-ui/error.html b/sologger-ui/error.html
index 60704bb..be599fc 100644
--- a/sologger-ui/error.html
+++ b/sologger-ui/error.html
@@ -6,21 +6,17 @@
     <title>Error - Sologger</title>
     <style>
         :root {
-            --primary-400: #34d399;
-            --primary-500: #10b981;
-            --primary-600: #059669;
-            --surface-50: #fafafa;
-            --surface-100: #f4f4f5;
-            --surface-700: #3f3f46;
-            --surface-800: #27272a;
-            --surface-900: #18181b;
-        }
-
-        @media (prefers-color-scheme: dark) {
-            body {
-                background-color: var(--surface-900);
-                color: var(--surface-100);
-            }
+            --primary-50: #efede6;
+            --primary-100: #ddadd8;
+            --primary-200: #d37fcf;
+            --primary-300: #d8ca47;
+            --primary-400: #ff4513;
+            --primary-500: #302d37;
+            --surface-50: #e6efe9;
+            --surface-100: #0f4d42;
+            --surface-700: #0f4d42;
+            --surface-800: #052b25;
+            --surface-900: #021b17;
         }
 
         body {
@@ -32,7 +28,7 @@
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            background-color: var(--surface-50);
+            background-color: var(--primary-50);
             color: var(--surface-800);
         }
 
@@ -45,14 +41,14 @@
         .logo {
             font-size: 2.5rem;
             font-weight: bold;
-            color: var(--primary-500);
+            color: var(--primary-400);
             margin-bottom: 2rem;
         }
 
         .error-code {
             font-size: 6rem;
             font-weight: bold;
-            color: var(--primary-400);
+            color: var(--primary-200);
             margin: 0;
             line-height: 1;
         }
@@ -60,19 +56,20 @@
         .error-title {
             font-size: 1.5rem;
             margin: 1rem 0;
-            color: var(--surface-700);
+            color: var(--surface-100);
         }
 
         .error-message {
             margin-bottom: 2rem;
             line-height: 1.5;
+            color: var(--surface-100);
         }
 
         .button {
             display: inline-block;
             padding: 0.75rem 1.5rem;
-            background-color: var(--primary-500);
-            color: white;
+            background-color: var(--primary-300);
+            color: var(--surface-900);
             text-decoration: none;
             border-radius: 0.375rem;
             font-weight: 500;
@@ -80,30 +77,44 @@
         }
 
         .button:hover {
-            background-color: var(--primary-600);
+            background-color: var(--primary-400);
         }
 
         .info {
             margin-top: 2rem;
             font-size: 0.875rem;
-            color: var(--surface-700);
+            color: var(--surface-100);
+        }
+
+        .info a {
+            color: var(--primary-400);
+        }
+
+        @media (prefers-color-scheme: dark) {
+            body {
+                background-color: var(--surface-900);
+                color: var(--primary-50);
+            }
+
+            .error-title, .error-message, .info {
+                color: var(--primary-50);
+            }
         }
 
         @media (max-width: 640px) {
             .container {
                 padding: 1rem;
             }
-
             .error-code {
                 font-size: 4rem;
             }
-
             .error-title {
                 font-size: 1.25rem;
             }
         }
     </style>
 </head>
+<!-- Rest of the HTML remains the same -->
 <body>
 <div class="container">
     <div class="logo">Sologger</div>
@@ -116,7 +127,7 @@ <h2 class="error-title">Page Not Found</h2>
     <a href="/" class="button">Return to Homepage</a>
     <p class="info">
         If you believe this is a mistake, please
-        <a href="https://github.com/wkennedy/issues"
+        <a href="https://github.com/brytelands/sologger/issues"
            target="_blank"
            rel="noopener noreferrer"
            style="color: var(--primary-500);">
diff --git a/sologger-ui/package-lock.json b/sologger-ui/package-lock.json
index 0df599f..b2e321c 100644
--- a/sologger-ui/package-lock.json
+++ b/sologger-ui/package-lock.json
@@ -9,10 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@handsontable/vue3": "^14.6.1",
+        "chart.js": "^4.4.6",
         "handsontable": "^14.6.1",
         "primevue": "^4.2.1",
         "tailwindcss-primeui": "^0.3.4",
         "vue": "^3.5.12",
+        "vue-chartjs": "^5.3.2",
         "vue-router": "^4.4.5"
       },
       "devDependencies": {
@@ -553,6 +555,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1259,6 +1267,18 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.6.tgz",
+      "integrity": "sha512-8Y406zevUPbbIBA/HRk33khEmQPk5+cxeflWE/2rx1NJsjVWMPw/9mSP9rxHP5eqi6LNoPBVMfZHxbwLSgldYA==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chevrotain": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-6.5.0.tgz",
@@ -2770,6 +2790,16 @@
         }
       }
     },
+    "node_modules/vue-chartjs": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.2.tgz",
+      "integrity": "sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.5.tgz",
diff --git a/sologger-ui/package.json b/sologger-ui/package.json
index 44405b5..2c35e0b 100644
--- a/sologger-ui/package.json
+++ b/sologger-ui/package.json
@@ -10,10 +10,12 @@
   },
   "dependencies": {
     "@handsontable/vue3": "^14.6.1",
+    "chart.js": "^4.4.6",
     "handsontable": "^14.6.1",
     "primevue": "^4.2.1",
     "tailwindcss-primeui": "^0.3.4",
     "vue": "^3.5.12",
+    "vue-chartjs": "^5.3.2",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
diff --git a/sologger-ui/src/App.vue b/sologger-ui/src/App.vue
index 1ceab13..ac6dd31 100644
--- a/sologger-ui/src/App.vue
+++ b/sologger-ui/src/App.vue
@@ -5,34 +5,34 @@
       <div class="flex items-center gap-6">
         <router-link
             to="/"
-            class="hover:text-primary-400 transition-colors"
+            class="text-[#e6efe9] hover:text-primary-400 transition-colors"
         >
           Home
         </router-link>
         <router-link
             to="/convert"
-            class="hover:text-primary-400 transition-colors"
+            class="text-[#e6efe9] hover:text-primary-400 transition-colors"
         >
           Convert Logs
         </router-link>
         <router-link
             to="/about"
-            class="hover:text-primary-400 transition-colors"
+            class="text-[#e6efe9] hover:text-primary-400 transition-colors"
         >
           About
         </router-link>
       </div>
 
       <div class="absolute left-1/2 transform -translate-x-1/2 flex items-center">
-        <span class="text-2xl font-bold text-primary-400">Sologger</span>
+        <span class="text-2xl font-bold text-primary-400"><img src="/sologger_header.png" alt="Sologger"/></span>
       </div>
 
       <div class="flex items-center">
         <a
-            href="https://github.com/wkennedy"
+            href="https://github.com/brytelands/sologger"
             target="_blank"
             rel="noopener noreferrer"
-            class="hover:text-primary-400 transition-colors"
+            class="text-[#e6efe9] hover:text-primary-400 transition-colors"
         >
           <svg
               class="h-6 w-6"
diff --git a/sologger-ui/src/components/LogsTable.vue b/sologger-ui/src/components/LogsTable.vue
index df3e314..c5b482b 100644
--- a/sologger-ui/src/components/LogsTable.vue
+++ b/sologger-ui/src/components/LogsTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="pagination flex items-center justify-between p-4 bg-surface-50 border-t border-surface-200">
-      <span class="text-sm text-surface-600">
+      <span class="text-sm text-surface-0">
         Showing {{ currentPage * pageSize + 1 }} - {{ Math.min((currentPage + 1) * pageSize, parsedLogs.length) }}
         of {{ parsedLogs.length }} entries
       </span>
@@ -84,6 +84,7 @@ export default {
         afterChange: true,
         columns: [
           { data: 'timestamp', title: 'Time' },
+          { data: 'level', title: 'Level' },
           {
             data: 'signature',
             title: 'Signature',
diff --git a/sologger-ui/src/components/StatsGrid.vue b/sologger-ui/src/components/StatsGrid.vue
index e771ada..c274371 100644
--- a/sologger-ui/src/components/StatsGrid.vue
+++ b/sologger-ui/src/components/StatsGrid.vue
@@ -1,22 +1,103 @@
 <template>
-  <div class="grid grid-cols-3 gap-4 mb-6">
-    <div class="bg-blue-100 p-4 rounded">
-      <h4 class="font-bold">Total Transactions</h4>
-      <p>{{ parsedLogs.length }}</p>
+  <div class="space-y-4 mb-6">
+    <div class="grid grid-cols-5 gap-4">
+      <div class="bg-blue-100 dark:bg-blue-900 p-4 rounded">
+        <h4 class="font-bold dark:text-white">Total Logs</h4>
+        <p class="dark:text-white">{{ parsedLogs.length }}</p>
+      </div>
+      <div class="bg-green-100 dark:bg-green-900 p-4 rounded">
+        <h4 class="font-bold dark:text-white">Unique Programs</h4>
+        <p class="dark:text-white">{{ uniqueProgramsCount }}</p>
+      </div>
+      <div class="bg-red-100 dark:bg-red-900 p-4 rounded">
+        <h4 class="font-bold dark:text-white">Error Logs</h4>
+        <p class="dark:text-white">{{ errorCount }}</p>
+      </div>
+      <div class="bg-emerald-100 dark:bg-emerald-900 p-4 rounded">
+        <h4 class="font-bold dark:text-white">Info Logs</h4>
+        <p class="dark:text-white">{{ infoCount }}</p>
+      </div>
+      <div class="bg-purple-100 dark:bg-purple-900 p-4 rounded">
+        <h4 class="font-bold dark:text-white">Last Update</h4>
+        <p class="dark:text-white">{{ lastUpdateTime }}</p>
+      </div>
     </div>
-    <div class="bg-green-100 p-4 rounded">
-      <h4 class="font-bold">Unique Programs</h4>
-      <p>{{ uniqueProgramsCount }}</p>
-    </div>
-    <div class="bg-purple-100 p-4 rounded">
-      <h4 class="font-bold">Last Update</h4>
-      <p>{{ lastUpdateTime }}</p>
+    <div class="bg-surface-800 dark:bg-surface-50 p-4 rounded h-48">
+      <Line :data="chartData"
+            :options="chartOptions"
+            class="w-full h-full"
+      />
     </div>
   </div>
 </template>
 
 <script>
+import { Line } from 'vue-chartjs';
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+
 export default {
-  props: ['parsedLogs', 'uniqueProgramsCount', 'lastUpdateTime']
+  components: { Line },
+  props: ['parsedLogs', 'uniqueProgramsCount', 'lastUpdateTime'],
+  computed: {
+    errorCount() {
+      return this.parsedLogs.filter(log => log.level === 'Error').length;
+    },
+    infoCount() {
+      return this.parsedLogs.filter(log => log.level === 'Info').length;
+    },
+    chartData() {
+      const timeLabels = [...new Set(this.parsedLogs.map(log => log.timestamp))].slice(-10);
+      const errorCounts = timeLabels.map(time =>
+          this.parsedLogs.filter(log => log.timestamp === time && log.level === 'Error').length
+      );
+
+      return {
+        labels: timeLabels,
+        datasets: [{
+          label: 'Errors Over Time',
+          data: errorCounts,
+          borderColor: '#ef4444',
+          backgroundColor: '#fee2e2',
+          tension: 0.4
+        }]
+      };
+    },
+    chartOptions() {
+      return {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: true,
+            labels: {
+              color: this.isDarkMode ? '#fff' : '#000'
+            }
+          }
+        },
+        scales: {
+          y: {
+            beginAtZero: true,
+            ticks: {
+              color: this.isDarkMode ? '#fff' : '#000'
+            }
+          },
+          x: {
+            ticks: {
+              color: this.isDarkMode ? '#fff' : '#000'
+            }
+          }
+        }
+      };
+    },
+  },
+
 };
-</script>
\ No newline at end of file
+</script>
+
+<style>
+.dark .chartjs-render-monitor {
+  filter: invert(1) hue-rotate(180deg);
+}
+</style>
\ No newline at end of file
diff --git a/sologger-ui/src/style.css b/sologger-ui/src/style.css
index 849681e..7e93457 100644
--- a/sologger-ui/src/style.css
+++ b/sologger-ui/src/style.css
@@ -1,71 +1,45 @@
 :root {
-  --p-primary-50: #ecfdf5;
-  --p-primary-100: #d1fae5;
-  --p-primary-200: #a7f3d0;
-  --p-primary-300: #6ee7b7;
-  --p-primary-400: #34d399;
-  --p-primary-500: #10b981;
-  --p-primary-600: #059669;
-  --p-primary-700: #047857;
-  --p-primary-800: #065f46;
-  --p-primary-900: #064e3b;
-  --p-primary-950: #022c22;
+  /* Primary colors */
+  --p-primary-50: #efede6;
+  --p-primary-100: #ddadd8;
+  --p-primary-200: #d37fcf;
+  --p-primary-300: #d8ca47;
+  --p-primary-400: #ff4513;
+  --p-primary-500: #302d37;
+
+  /* Surface colors - Dark greens */
   --p-surface-0: #ffffff;
-  --p-surface-50: #fafafa;
-  --p-surface-100: #f4f4f5;
-  --p-surface-200: #e4e4e7;
-  --p-surface-300: #d4d4d8;
-  --p-surface-400: #a1a1aa;
-  --p-surface-500: #71717a;
-  --p-surface-600: #52525b;
-  --p-surface-700: #3f3f46;
-  --p-surface-800: #27272a;
-  --p-surface-900: #18181b;
-  --p-surface-950: #09090b;
-  --p-content-border-radius: 6px;
-}
-
-/* Light */
+  --p-surface-50: #e6efe9;
+  --p-surface-100: #0f4d42;
+  --p-surface-200: #052b25;
+  --p-surface-300: #1b6442;
+  --p-surface-400: #0f4d42;
+  --p-surface-500: #052b25;
+  --p-surface-600: #1b6442;
+  --p-surface-700: #0f4d42;
+  --p-surface-800: #052b25;
+  --p-surface-900: #021b17;
+  --p-surface-950: #010f0d;
+}
+
+/* Light mode */
 :root {
-  --p-primary-color: var(--p-primary-500);
+  --p-primary-color: var(--p-primary-400);
   --p-primary-contrast-color: var(--p-surface-0);
-  --p-primary-hover-color: var(--p-primary-600);
-  --p-primary-active-color: var(--p-primary-700);
   --p-content-border-color: var(--p-surface-200);
-  --p-content-hover-background: var(--p-surface-100);
-  --p-content-hover-color: var(--p-surface-800);
-  --p-highlight-background: var(--p-primary-50);
-  --p-highlight-color: var(--p-primary-700);
-  --p-highlight-focus-background: var(--p-primary-100);
-  --p-highlight-focus-color: var(--p-primary-800);
-  --p-text-color: var(--p-surface-700);
-  --p-text-hover-color: var(--p-surface-800);
-  --p-text-muted-color: var(--p-surface-500);
-  --p-text-hover-muted-color: var(--p-surface-600);
-}
-
-/* Dark */
+  --p-text-color: var(--p-surface-800);
+}
+
+/* Dark mode */
 @media (prefers-color-scheme: dark) {
   :root {
-    --p-primary-color: var(--p-primary-400);
+    --p-primary-color: var(--p-primary-300);
     --p-primary-contrast-color: var(--p-surface-900);
-    --p-primary-hover-color: var(--p-primary-300);
-    --p-primary-active-color: var(--p-primary-200);
     --p-content-border-color: var(--p-surface-700);
-    --p-content-hover-background: var(--p-surface-800);
-    --p-content-hover-color: var(--p-surface-0);
-    --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
-    --p-highlight-color: rgba(255, 255, 255, 0.87);
-    --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
-    --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
-    --p-text-color: var(--p-surface-0);
-    --p-text-hover-color: var(--p-surface-0);
-    --p-text-muted-color: var(--p-surface-400);
-    --p-text-hover-muted-color: var(--p-surface-300);
+    --p-text-color: var(--p-surface-50);
   }
 }
 
-
 .hot {
   height: calc(100vh - 300px);
   overflow: hidden;
@@ -104,11 +78,11 @@
 }
 
 .scrollable-cell::-webkit-scrollbar-track {
-  background: var(--p-surface-100);
+  background: var(--p-surface-50);
 }
 
 .scrollable-cell::-webkit-scrollbar-thumb {
-  background: var(--p-surface-400);
+  background: var(--p-surface-50);
   border-radius: 2px;
 }
 
@@ -123,7 +97,7 @@
 }
 
 .hot .handsontable th {
-  background-color: var(--p-surface-100);
+  background-color: var(--p-surface-50);
   color: var(--p-surface-800) !important;
   font-weight: 600;
 }
@@ -137,12 +111,12 @@
 @media (prefers-color-scheme: dark) {
   .hot .handsontable th {
     background-color: var(--p-surface-800);
-    color: var(--p-surface-100) !important;
+    color: var(--p-surface-50) !important;
   }
 
   .hot .handsontable td {
     background-color: var(--p-surface-900);
-    color: var(--p-surface-100) !important;
+    color: var(--p-surface-50) !important;
   }
 }
 
@@ -174,13 +148,13 @@
 }
 
 .pagination {
-  background-color: var(--p-surface-50);
-  color: var(--p-surface-800);
+  background-color: var(--p-surface-800);
+  color: var(--p-surface-50);
 }
 
 .pagination button {
-  background-color: var(--p-surface-0);
-  color: var(--p-surface-800);
+  background-color: var(--p-surface-800);
+  color: var(--p-surface-50);
 }
 
 .pagination button:hover:not(:disabled) {
@@ -190,12 +164,12 @@
 @media (prefers-color-scheme: dark) {
   .pagination {
     background-color: var(--p-surface-800);
-    color: var(--p-surface-100);
+    color: var(--p-surface-50);
   }
 
   .pagination button {
     background-color: var(--p-surface-700);
-    color: var(--p-surface-100);
+    color: var(--p-surface-50);
     border-color: var(--p-surface-600);
   }
 
diff --git a/sologger-ui/src/views/AboutView.vue b/sologger-ui/src/views/AboutView.vue
index 6dc5eec..8e86cbe 100644
--- a/sologger-ui/src/views/AboutView.vue
+++ b/sologger-ui/src/views/AboutView.vue
@@ -1,17 +1,16 @@
-// src/views/AboutView.vue
 <template>
   <div class="container mx-auto p-4">
     <h1 class="text-2xl font-bold mb-6 text-surface-800 dark:text-surface-100">
       About Sologger
     </h1>
-    <div class="prose dark:prose-invert">
-      <p>
+    <div class="max-w-3xl text-surface-800 dark:text-surface-100">
+      <p class="mb-6 text-lg">
         Sologger is a real-time Solana program log explorer and analysis tool.
         It helps developers monitor and debug their Solana programs across different networks.
       </p>
 
-      <h2>Features</h2>
-      <ul>
+      <h2 class="text-xl font-bold mt-8 mb-4">Features</h2>
+      <ul class="list-disc pl-6 mb-6 space-y-2">
         <li>Real-time log monitoring</li>
         <li>Multi-program support</li>
         <li>Cross-network compatibility</li>
@@ -19,24 +18,24 @@
         <li>Data export capabilities</li>
       </ul>
 
-      <h2>Getting Started</h2>
-      <p>
+      <h2 class="text-xl font-bold mt-8 mb-4">Getting Started</h2>
+      <p class="mb-4">
         To begin monitoring your Solana program logs:
       </p>
-      <ol>
-        <li>Select a network (Mainnet, Devnet, or Testnet)</li>
+      <ol class="list-decimal pl-6 mb-6 space-y-2">
+        <li>Select a network (Devnet, Testnet, or enter your RPC URL (Helius, QuickNode, etc...). In order to listen to logs on Mainnet you must use your own URL</li>
         <li>Enter your program ID</li>
         <li>Click "Start Logs" to begin monitoring</li>
       </ol>
 
-      <h2>Contributing</h2>
-      <p>
+      <h2 class="text-xl font-bold mt-8 mb-4">Contributing</h2>
+      <p class="mb-6">
         Contributions are welcome! Visit our
         <a
-            href="https://github.com/wkennedy"
+            href="https://github.com/brytelands/sologger"
             target="_blank"
             rel="noopener noreferrer"
-            class="text-primary-500 hover:text-primary-600"
+            class="text-primary-400 hover:text-primary-500 underline"
         >
           GitHub repository
         </a>
diff --git a/sologger-ui/src/views/ConvertView.vue b/sologger-ui/src/views/ConvertView.vue
index b8139be..83e8876 100644
--- a/sologger-ui/src/views/ConvertView.vue
+++ b/sologger-ui/src/views/ConvertView.vue
@@ -1,18 +1,192 @@
-// src/views/ConvertView.vue
 <template>
   <div class="container mx-auto p-4">
     <h1 class="text-2xl font-bold mb-6 text-surface-800 dark:text-surface-100">
       Convert Solana Logs
     </h1>
-    <p class="mb-6 text-surface-600 dark:text-surface-300">
-      Convert and analyze Solana program logs from different formats.
-    </p>
-    <!-- Add your log conversion functionality here -->
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <div class="space-y-4">
+        <textarea
+            v-model="inputLogs"
+            placeholder="Paste your raw Solana logs here, for example:
+
+Program 9RX7oz3WN5VRTqekBBHBvEJFVMNRnrCmVy7S6B6S5oU7 invoke [1]
+Program log: Instruction: Initialize
+Program 11111111111111111111111111111111 invoke [2]
+Program 11111111111111111111111111111111 success
+Program log: Initialized new event. Current value
+Program 9RX7oz3WN5VRTqekBBHBvEJFVMNRnrCmVy7S6B6S5oU7 consumed 59783 of 200000 compute units
+Program 9RX7oz3WN5VRTqekBBHBvEJFVMNRnrCmVy7S6B6S5oU7 success
+Program AbcdefGPvbdGVxr1b2hvZbsiqW5xWH25efTNsLJA8knL invoke [1]
+Program log: Create
+Program AbcdefGPvbdGVxr1b2hvZbsiqW5xWH25efTNsLJA8knL consumed 5475 of 200000 compute units
+Program failed to complete: Invoked an instruction with data that is too large (12178014311288245306 > 10240)
+Program AbcdefGPvbdGVxr1b2hvZbsiqW5xWH25efTNsLJA8knL failed: Program failed to complete"
+            class="w-full h-[600px] p-4 font-mono text-sm rounded-lg border border-surface-200 bg-surface-800 text-white dark:bg-surface-800 dark:border-surface-700"
+            @input="handleInput"
+        ></textarea>
+        <button
+            @click="convertLogs"
+            class="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600 disabled:opacity-50"
+            :disabled="!inputLogs"
+        >
+          Convert Logs
+        </button>
+      </div>
+
+      <div class="space-y-4">
+        <div
+            v-if="convertedLogs"
+            class="h-[600px] p-4 font-mono text-sm rounded-lg border border-surface-200 bg-surface-800 text-white dark:bg-surface-800 dark:border-surface-700 overflow-auto"
+        >
+          <pre>{{ formattedOutput }}</pre>
+        </div>
+        <div v-else class="h-[600px] flex items-center justify-center border border-dashed border-surface-200 dark:border-surface-700 rounded-lg bg-surface-800">
+          <span class="text-surface-400">Converted logs will appear here</span>
+        </div>
+        <div class="flex gap-4">
+          <button
+              @click="downloadLogs"
+              class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
+              :disabled="!convertedLogs"
+          >
+            Download JSON
+          </button>
+          <button
+              @click="copyToClipboard"
+              class="px-4 py-2 bg-surface-700 text-white rounded hover:bg-surface-600 disabled:opacity-50"
+              :disabled="!convertedLogs"
+          >
+            Copy to Clipboard
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div
+        v-if="error"
+        class="mt-4 p-4 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-100 rounded-lg"
+    >
+      {{ error }}
+    </div>
   </div>
 </template>
 
 <script>
+import { WasmLogContextTransformer } from '../deps/sologger-log-transformer-wasm/pkg/sologger_log_transformer_wasm.js';
+
+const sanitizeLogMessage = (message) => {
+  if (typeof message === 'object') {
+    return JSON.stringify(message, (key, value) => {
+      if (typeof value === 'string') {
+        return value.replace(/[\n\r\t]/g, ' ').replace(/\s+/g, ' ');
+      }
+      return value;
+    });
+  }
+  if (typeof message === 'string') {
+    return message.replace(/[\n\r\t]/g, ' ').replace(/\s+/g, ' ');
+  }
+  return message;
+};
+
 export default {
-  name: 'ConvertView'
+  name: 'ConvertView',
+  data() {
+    return {
+      inputLogs: '',
+      convertedLogs: null,
+      error: null,
+      transformer: null
+    };
+  },
+  computed: {
+    formattedOutput() {
+      return this.convertedLogs ? JSON.stringify(this.convertedLogs, null, 2) : '';
+    }
+  },
+  mounted() {
+    this.transformer = new WasmLogContextTransformer(["*"]);
+  },
+  methods: {
+    handleInput() {
+      this.error = null;
+      this.convertedLogs = null;
+    },
+
+    convertLogs() {
+      try {
+        // Parse input as JSON if possible
+        let inputData;
+        try {
+          inputData = JSON.parse(this.inputLogs);
+        } catch {
+          // If not JSON, treat as raw logs
+          inputData = {
+            logs: this.inputLogs.split('\n').filter(line => line.trim()),
+            signature: 'unknown',
+            slot: Date.now(),
+            err: null
+          };
+        }
+
+        const parsedLogs = this.transformer.from_rpc_logs_response({
+          signature: inputData.signature || 'unknown',
+          err: inputData.err || null,
+          logs: inputData.logs || []
+        }, BigInt(inputData.slot || Date.now()));
+
+        let sanitizedLogs = parsedLogs.map(log => ({
+          signature: sanitizeLogMessage(inputData.signature),
+          slot: inputData.slot,
+          solana: JSON.parse(sanitizeLogMessage(log))
+        }));
+
+        this.convertedLogs = {
+          metadata: {
+            convertedAt: new Date().toISOString(),
+            totalLogs: sanitizedLogs.length
+          },
+          logs: sanitizedLogs
+        };
+      } catch (error) {
+        this.error = `Error converting logs: ${error.message}`;
+        console.error('Error details:', error);
+      }
+    },
+
+    async copyToClipboard() {
+      try {
+        await navigator.clipboard.writeText(this.formattedOutput);
+      } catch (error) {
+        this.error = 'Failed to copy to clipboard';
+      }
+    },
+
+    downloadLogs() {
+      if (!this.convertedLogs) return;
+
+      const blob = new Blob([this.formattedOutput], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `converted-solana-logs-${new Date().toISOString()}.json`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    }
+  }
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+textarea {
+  resize: none;
+}
+</style>
\ No newline at end of file
diff --git a/sologger-ui/src/views/HomeView.vue b/sologger-ui/src/views/HomeView.vue
index dd4ea6c..4fec5af 100644
--- a/sologger-ui/src/views/HomeView.vue
+++ b/sologger-ui/src/views/HomeView.vue
@@ -1,21 +1,3 @@
-// src/views/HomeView.vue
-<!--<template>-->
-<!--  <div class="container mx-auto p-4">-->
-<!--    <h1 class="text-2xl font-bold mb-6 text-surface-800 dark:text-surface-100">-->
-<!--      Solana Log Explorer-->
-<!--    </h1>-->
-<!--    <p class="mb-6 text-surface-600 dark:text-surface-300">-->
-<!--      Monitor and analyze Solana program logs in real-time across different networks.-->
-<!--    </p>-->
-<!--    &lt;!&ndash; Your existing app content goes here &ndash;&gt;-->
-<!--    <ProgramIdForm v-model="newProgramId" @addProgramId="addProgramId" />-->
-<!--    <div class="flex gap-4 mb-6">-->
-<!--      &lt;!&ndash; Environment selector and buttons &ndash;&gt;-->
-<!--    </div>-->
-<!--    &lt;!&ndash; Rest of your existing template &ndash;&gt;-->
-<!--  </div>-->
-<!--</template>-->
-
 <template>
   <div>
     <div class="container mx-auto p-4">
@@ -75,7 +57,7 @@
       <div class="mb-6">
         <div class="flex flex-wrap gap-2">
           <div v-for="programId in programIds" :key="programId"
-               class="flex items-center gap-2 px-3 py-1.5 bg-surface-100 rounded-lg text-sm">
+               class="flex items-center gap-2 bg-gray-100 px-3 py-1 rounded">
             <span>{{ programId }}</span>
             <div v-if="connectingWebsockets.has(programId)" class="flex items-center gap-2">
               <span class="text-primary-500">Connecting...</span>
@@ -98,6 +80,17 @@
           :uniqueProgramsCount="uniqueProgramsCount"
           :lastUpdateTime="lastUpdateTime"
       />
+      <div class="flex items-center gap-2 mb-4">
+        <input
+            type="checkbox"
+            id="errorFilter"
+            v-model="onlyShowErrors"
+            class="w-4 h-4 text-primary-400 bg-surface-50 border-surface-300 rounded focus:ring-primary-500"
+        />
+        <label for="errorFilter" class="text-surface-800 dark:text-surface-100">
+          Only show error logs
+        </label>
+      </div>
       <LogsTable
           :parsedLogs="parsedLogs"
           :hotSettings="hotSettings"
@@ -108,8 +101,6 @@
 
 <script>
 // Import your existing App.vue script here and rename the component
-// import { onMounted } from 'vue';
-// import { registerAllModules } from 'handsontable/registry';
 import { onMounted } from 'vue';
 import { registerAllModules } from 'handsontable/registry';
 import init, { WasmLogContextTransformer } from '../deps/sologger-log-transformer-wasm/pkg/sologger_log_transformer_wasm.js';
@@ -162,23 +153,24 @@ export default {
       newProgramId: '',
       programIds: [],
       environments: [
-        { key: 'Mainnet', url: 'wss://api.mainnet-beta.solana.com' },
         { key: 'Devnet', url: 'wss://api.devnet.solana.com' },
         { key: 'Testnet', url: 'wss://api.testnet.solana.com' }
       ],
       customUrl: '',
       selectedEnvironment: 'wss://api.devnet.solana.com',
+      onlyShowErrors: false,
       parsedLogs: [],
       lastUpdateTime: '-',
       hotSettings: {
         columns: [
           { data: 'timestamp', title: 'Time', width: 100, type: 'text' },
+          { data: 'level', title: 'Level', width: 80, type: 'text' },
           { data: 'signature', title: 'Signature', width: 200, type: 'text' },
           { data: 'slot', title: 'Slot', width: 100, type: 'numeric' },
           { data: 'programId', title: 'Program ID', width: 150, type: 'text' },
           { data: 'parentProgramId', title: 'Parent Program', width: 150, type: 'text' },
           { data: 'depth', title: 'Depth', width: 80, type: 'numeric' },
-          { data: 'instructionIndex', title: 'Instruction Index', width: 100, type: 'numeric' },
+          { data: 'instructionIndex', title: 'Index', width: 80, type: 'numeric' },
           { data: 'invokeResult', title: 'Result', width: 100, type: 'text' },
           { data: 'logMessages', title: 'Log Messages', width: 300, type: 'text' },
           { data: 'rawLogs', title: 'Raw Logs', width: 300, type: 'text' },
@@ -197,7 +189,7 @@ export default {
         manualColumnResize: true,
         autoWrapRow: true,
         autoWrapCol: true,
-        nestedRows: true,
+        nestedRows: false,
         contextMenu: true,
         readOnly: true
       }
@@ -213,6 +205,7 @@ export default {
     parseLog(logData) {
       return {
         timestamp: new Date().toLocaleTimeString(),
+        level: logData.solana.transaction_error !== null && logData.solana.transaction_error !== "" ? "Error" : "Info",
         signature: logData.signature,
         slot: logData.slot,
         programId: logData.solana.program_id,
@@ -314,12 +307,14 @@ export default {
             };
 
             if(sanitizedLog.solana.transaction_error !== null && sanitizedLog.solana.transaction_error !== "") {
-              console.log('Dev Solana logs', JSON.stringify(sanitizedLog));
+              // console.log('Dev Solana logs', JSON.stringify(sanitizedLog));
             } else {
-              console.log('Dev Solana logs', JSON.stringify(sanitizedLog));
+              // console.log('Dev Solana logs', JSON.stringify(sanitizedLog));
             }
 
-            sanitizedLogs.push(sanitizedLog);
+            if (!this.onlyShowErrors || (sanitizedLog.solana.transaction_error !== null && sanitizedLog.solana.transaction_error !== "")) {
+              sanitizedLogs.push(sanitizedLog);
+            }
 
           });
 
diff --git a/sologger-ui/vite.config.js b/sologger-ui/vite.config.js
index b91ef76..ea9e9a8 100644
--- a/sologger-ui/vite.config.js
+++ b/sologger-ui/vite.config.js
@@ -1,27 +1,25 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-// import vitePluginWasmPack from "vite-plugin-wasm-pack";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
       vue(),
-      // vitePluginWasmPack('./public/sologger-log-transformer-wasm')
   ],
+  base: '/sologger/',
   optimizeDeps: {
     include: ['@handsontable/vue3']
   },
-  // Add this for error page handling
-  // publicDir: 'public',
-  // build: {
-  //   outDir: 'dist',
-  //   assetsDir: 'assets',
-  //   rollupOptions: {
-  //     input: {
-  //       main: './index.html',
-  //       error: './error.html'
-  //     }
-  //   }
-  // }
+  publicDir: 'public',
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+    rollupOptions: {
+      input: {
+        main: './index.html',
+        error: './error.html'
+      }
+    }
+  }
 })