dbwatcher 1.1.4 → 1.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4b14e37821dd10efdc21bfa6e9a68ff8ffea9096d616616893944aca66dd1c58
-  data.tar.gz: 983a92a4065533bdb7f15a0adeeefc3fd0a97109cf5b08a9c4adaef11bd829f9
+  metadata.gz: 2cf4c24fcda38648ede006957633b758593dc107cf214bb3cf3d264864d618fd
+  data.tar.gz: 71fc6512b3b0950304c9439e57c61e653337338c1d34d73c74bb1c95d5efddcb
 SHA512:
-  metadata.gz: 86071979a9e26aa6e0e5f289b4079804615e4477357dc894305d8eab047c328c9a1d97651e37889c913f073fc8f156abd410582adbe8581f68443f3d195fc5f4
-  data.tar.gz: '09bacda0cc050854b53d8567b46c791cfc440825598bb3c06300e2f4f572dd1f3cde1df0b127a332edd9a3995077ef7beae9bafc47cb7629478d2671a0d2691a'
+  metadata.gz: e0b90b3d7471286e9cbf55ff1955b2464a1cb7909412dfbfcdcee9d7db5f67d70bb82ef971c1d5b0dfa25f442ce140c93d8827a3b39cef08547b24f875f6750b
+  data.tar.gz: b0afd7877856e356911163220e0a43153c1fa70607939e8b78266b23817a94ec4a14a3c5052f62dcbb164f83438a4c397b3639dd2cd388f20e272a824217085c

data/README.md

@@ -1,14 +1,32 @@
-# DBWatcher
+<div align="center">
+  <img src="https://raw.githubusercontent.com/patrick204nqh/dbwatcher/master/app/assets/images/dbwatcher/dbwatcher_512x512.png" alt="dbwatcher Logo" width="120" height="120">
+
+  <h1 align="center">dbwatcher</h1>
+
+  <p align="center">
+    <em>🔍 Track, visualize, and debug database operations in your Rails applications</em>
+  </p>
+</div>
 
 [![CI](https://github.com/patrick204nqh/dbwatcher/actions/workflows/ci.yml/badge.svg)](https://github.com/patrick204nqh/dbwatcher/actions/workflows/ci.yml)
 [![Release Gem](https://github.com/patrick204nqh/dbwatcher/actions/workflows/release.yml/badge.svg)](https://github.com/patrick204nqh/dbwatcher/actions/workflows/release.yml)
 [![Gem Version](https://badge.fury.io/rb/dbwatcher.svg)](https://badge.fury.io/rb/dbwatcher)
+[![RubyGems Downloads](https://img.shields.io/gem/dt/dbwatcher?color=blue)](https://rubygems.org/gems/dbwatcher)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Maintainability](https://qlty.sh/gh/patrick204nqh/projects/dbwatcher/maintainability.svg)](https://qlty.sh/gh/patrick204nqh/projects/dbwatcher)
 [![Code Coverage](https://qlty.sh/gh/patrick204nqh/projects/dbwatcher/coverage.svg)](https://qlty.sh/gh/patrick204nqh/projects/dbwatcher)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 A Rails gem that tracks and visualizes database operations in your application. Built for developers who need to understand complex data flows and debug database interactions.
 
+## Why dbwatcher?
+
+When developing Rails applications, understanding what database operations occur during code execution can be challenging. **dbwatcher** provides a simple way to:
+
+- Track database changes within specific code blocks
+- Monitor SQL operations during HTTP requests
+- Visualize database relationships and model associations
+- Debug complex data flows with an intuitive web interface
+
 ## Key Features
 
 - **Database Operation Tracking** - Capture SQL operations (INSERT, UPDATE, DELETE)
@@ -22,11 +40,11 @@ A Rails gem that tracks and visualizes database operations in your application.
 
 ### Dashboard Interface
 
-![image](https://github.com/user-attachments/assets/92c94bdc-06fd-463e-a11f-f931a8ff5346)
+![image](https://github.com/user-attachments/assets/063e6030-c53e-4338-9332-94173542aca5)
 
 ### Session View
 
-![image](https://github.com/user-attachments/assets/cae4c820-d7d9-4d16-b8fa-5978e0578ff8)
+![image](https://github.com/user-attachments/assets/790b0f37-ca76-48d8-83d2-5a6fb1a1dee8)
 
 [View more screenshots in here →](docs/screenshots.md)
 
@@ -75,17 +93,47 @@ Visit `/dbwatcher` in your browser to explore tracked operations.
 
 ## Configuration
 
-Optional configuration in `config/initializers/dbwatcher.rb`:
+**dbwatcher** works out of the box with zero configuration - simply install the gem and visit `/dbwatcher` in your Rails application.
+
+### Configuration Options
+
+<details>
+<summary>View All Configuration Settings</summary>
+
+| Setting                       | Type    | Default           | Description                                         |
+| ----------------------------- | ------- | ----------------- | --------------------------------------------------- |
+| **Core Settings**             |
+| `enabled`                     | Boolean | `true`            | Enable or disable DBWatcher                         |
+| `storage_path`                | String  | `"tmp/dbwatcher"` | Directory for session data storage                  |
+| **Session Management**        |
+| `max_sessions`                | Integer | `50`              | Maximum number of sessions to retain                |
+| `auto_clean_days`             | Integer | `7`               | Automatically delete sessions older than N days     |
+| **Query Tracking**            |
+| `track_queries`               | Boolean | `false`           | Enable full SQL query tracking (resource intensive) |
+| **System Information**        |
+| `system_info`                 | Boolean | `true`            | Collect system information for debugging            |
+| `debug_mode`                  | Boolean | `false`           | Enable detailed debug logging                       |
+| **Database Diagram Options**  |
+| `diagram_show_attributes`     | Boolean | `true`            | Display model attributes in diagrams                |
+| `diagram_show_cardinality`    | Boolean | `true`            | Show relationship cardinality indicators            |
+| `diagram_show_methods`        | Boolean | `false`           | Include model methods in diagrams                   |
+| `diagram_max_attributes`      | Integer | `10`              | Maximum attributes displayed per model              |
+| `diagram_attribute_types`     | Boolean | `true`            | Show data types for attributes                      |
+| `diagram_relationship_labels` | Boolean | `true`            | Display labels on relationship lines                |
+
+### Configuration Example
 
 ```ruby
-Dbwatcher.configure do |config|
-  config.storage_path = Rails.root.join('tmp', 'dbwatcher')
-  config.enabled = Rails.env.development?
-  config.max_sessions = 100
-  config.auto_clean_after_days = 7
+# config/environments/development.rb
+Rails.application.configure do
+  config.dbwatcher.enabled = true
+  config.dbwatcher.max_sessions = 100
+  config.dbwatcher.track_queries = true
 end
 ```
 
+</details>
+
 ## Advanced Features
 
 ### Custom Metadata
@@ -101,17 +149,22 @@ Dbwatcher.track(
 end
 ```
 
-### Testing Integration
+### Access Current Session
 
-Use in your test suite:
+Access the current tracking session:
 
 ```ruby
-it "creates user with associations" do
-  Dbwatcher.track(name: "User Creation Test") do
-    user = create(:user)
-    expect(user.profile).to be_present
-  end
-end
+session = Dbwatcher.current_session
+puts "Session ID: #{session.id}"
+puts "Total changes: #{session.changes.count}"
+```
+
+### Clear All Data
+
+Remove all stored sessions and queries:
+
+```ruby
+Dbwatcher.clear_all
 ```
 
 ## Development
@@ -134,14 +187,6 @@ COVERAGE=true bundle exec rake test
 
 Coverage reports will be generated in the `coverage/` directory.
 
-### CI Coverage Setup
-
-To enable coverage uploads to Qlty in CI:
-
-1. Create an account at [Qlty.sh](https://qlty.sh)
-2. Create a new project and get your coverage token
-3. Add the token as a GitHub repository secret named `QLTY_COVERAGE_TOKEN`
-
 ### Local Development
 
 ```bash
@@ -157,6 +202,8 @@ bundle exec rubocop    # Linting
 bundle exec brakeman   # Security analysis
 ```
 
+[Changelog →](CHANGELOG.md)
+
 ## Contributing
 
 1. Fork the repository
@@ -170,6 +217,13 @@ bundle exec brakeman   # Security analysis
 
 [Contributing guidelines →](CONTRIBUTING.md)
 
+## Resources
+
+- [Documentation](https://rubydoc.info/gems/dbwatcher)
+- [Changelog](CHANGELOG.md)
+- [Report Bug](https://github.com/patrick204nqh/dbwatcher/issues/new)
+- [Request Feature](https://github.com/patrick204nqh/dbwatcher/issues/new)
+
 ## License
 
 Released under the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/config/dbwatcher_manifest.js

@@ -14,3 +14,12 @@
 // Stylesheets
 //= link dbwatcher/application.css
 //= link dbwatcher/vendor/tabulator.min.css
+
+// Images - Required assets
+//= link dbwatcher/dbwatcher-tranparent_512x512.png
+//= link dbwatcher/favicon.ico
+//= link dbwatcher/favicon-96x96.png
+//= link dbwatcher/apple-touch-icon.png
+//= link dbwatcher/web-app-manifest-192x192.png
+//= link dbwatcher/web-app-manifest-512x512.png
+//= link dbwatcher/site.webmanifest

data/app/assets/images/dbwatcher/README.md

@@ -0,0 +1,24 @@
+# DBWatcher Image Assets
+
+## Active Assets
+These image assets are currently used by the gem and declared in `app/assets/config/dbwatcher_manifest.js`:
+
+- `dbwatcher-tranparent_512x512.png` - Main logo used in dashboard and session views
+- `favicon.ico` - Browser favicon
+- `favicon-96x96.png` - High-res favicon for modern browsers
+- `apple-touch-icon.png` - iOS home screen icon
+- `web-app-manifest-192x192.png` - PWA manifest icon (192x192)
+- `web-app-manifest-512x512.png` - PWA manifest icon (512x512)
+- `site.webmanifest` - Web app manifest file
+
+## Archived Assets
+The following assets were moved to `unused-assets.zip` as they are not currently referenced in the codebase:
+
+- `dbwatcher-social-preview.svg` - Social media preview image (SVG)
+- `dbwatcher_512x512.svg` - Logo in SVG format
+- `dbwatcher-social-preview-with-bg.svg` - Social preview with background
+- `favicon.svg` - SVG favicon (unused)
+- `dbwatcher-social-preview.png` - Social media preview image (PNG)
+- `dbwatcher_512x512.png` - Alternative logo PNG
+
+These files can be extracted from the zip if needed in the future.

data/app/assets/images/dbwatcher/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "dbwatcher",
+  "short_name": "dbwatcher",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

data/app/assets/stylesheets/dbwatcher/application.css

@@ -1,7 +1,7 @@
 /**
  * DBWatcher Application Styles
  * Compiled CSS for all components
- * Generated at 2025-07-11 21:59:56 +0700
+ * Generated at 2025-07-20 11:15:05 +0700
  */
 
 /**
@@ -572,6 +572,10 @@ pre[x-ref="codeContainer"]::-webkit-scrollbar-thumb:hover {
   z-index: 20;
   background: #f3f3f3;
   box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+  will-change: transform;
+  transform: translateZ(0);
+  opacity: 1;
+  transition: opacity 0.1s ease-out;
 }
 
 .tabulator .tabulator-header .tabulator-col.sticky-left-1 {
@@ -580,6 +584,10 @@ pre[x-ref="codeContainer"]::-webkit-scrollbar-thumb:hover {
   z-index: 19;
   background: #f3f3f3;
   box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+  will-change: transform;
+  transform: translateZ(0);
+  opacity: 1;
+  transition: opacity 0.1s ease-out;
 }
 
 .tabulator .tabulator-header .tabulator-col.sticky-left-2 {
@@ -588,6 +596,10 @@ pre[x-ref="codeContainer"]::-webkit-scrollbar-thumb:hover {
   z-index: 18;
   background: #f3f3f3;
   box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+  will-change: transform;
+  transform: translateZ(0);
+  opacity: 1;
+  transition: opacity 0.1s ease-out;
 }
 
 .tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
@@ -646,53 +658,75 @@ pre[x-ref="codeContainer"]::-webkit-scrollbar-thumb:hover {
 .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.sticky-left-0 {
   position: sticky;
   left: 0;
-  background: white;
+  background: white !important;
+  background-color: white !important;
   z-index: 5;
   box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+  will-change: transform;
+  transform: translateZ(0);
+  opacity: 1 !important;
+  transition: opacity 0.1s ease-out;
 }
 
 .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.sticky-left-1 {
   position: sticky;
   left: 60px;
-  background: white;
+  background: white !important;
+  background-color: white !important;
   z-index: 4;
   box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+  will-change: transform;
+  transform: translateZ(0);
+  opacity: 1 !important;
+  transition: opacity 0.1s ease-out;
 }
 
 .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.sticky-left-2 {
   position: sticky;
   left: 108px;
-  background: white;
+  background: white !important;
+  background-color: white !important;
   z-index: 3;
   box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+  will-change: transform;
+  transform: translateZ(0);
+  opacity: 1 !important;
+  transition: opacity 0.1s ease-out;
 }
 
 .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover .tabulator-cell.sticky-left-0, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover .tabulator-cell.sticky-left-1, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover .tabulator-cell.sticky-left-2 {
   background: #f9fafb;
+  opacity: 1;
 }
 
 .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-insert .tabulator-cell.sticky-left-0, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-insert .tabulator-cell.sticky-left-1, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-insert .tabulator-cell.sticky-left-2 {
   background-color: rgba(16, 185, 129, 0.05);
+  opacity: 1;
 }
 
 .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-update .tabulator-cell.sticky-left-0, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-update .tabulator-cell.sticky-left-1, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-update .tabulator-cell.sticky-left-2 {
   background-color: rgba(108, 173, 223, 0.05);
+  opacity: 1;
 }
 
 .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-delete .tabulator-cell.sticky-left-0, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-delete .tabulator-cell.sticky-left-1, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-delete .tabulator-cell.sticky-left-2 {
   background-color: rgba(239, 68, 68, 0.05);
+  opacity: 1;
 }
 
 .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-insert:hover .tabulator-cell.sticky-left-0, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-insert:hover .tabulator-cell.sticky-left-1, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-insert:hover .tabulator-cell.sticky-left-2 {
   background-color: rgba(16, 185, 129, 0.1);
+  opacity: 1;
 }
 
 .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-update:hover .tabulator-cell.sticky-left-0, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-update:hover .tabulator-cell.sticky-left-1, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-update:hover .tabulator-cell.sticky-left-2 {
   background-color: rgba(108, 173, 223, 0.1);
+  opacity: 1;
 }
 
 .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-delete:hover .tabulator-cell.sticky-left-0, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-delete:hover .tabulator-cell.sticky-left-1, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-delete:hover .tabulator-cell.sticky-left-2 {
   background-color: rgba(239, 68, 68, 0.1);
+  opacity: 1;
 }
 
 .row-detail {

data/app/assets/stylesheets/dbwatcher/components/_tabulator.scss

@@ -35,24 +35,39 @@
         position: sticky;
         left: 0;
         z-index: 20;
-        background: #f3f3f3;
+        background: #f3f3f3 !important;
+        background-color: #f3f3f3 !important;
         box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+        will-change: transform;
+        transform: translateZ(0);
+        opacity: 1 !important;
+        transition: opacity 0.1s ease-out;
       }
 
       &.sticky-left-1 {
         position: sticky;
         left: 60px;
         z-index: 19;
-        background: #f3f3f3;
+        background: #f3f3f3 !important;
+        background-color: #f3f3f3 !important;
         box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+        will-change: transform;
+        transform: translateZ(0);
+        opacity: 1 !important;
+        transition: opacity 0.1s ease-out;
       }
 
       &.sticky-left-2 {
         position: sticky;
         left: 108px;
         z-index: 18;
-        background: #f3f3f3;
+        background: #f3f3f3 !important;
+        background-color: #f3f3f3 !important;
         box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+        will-change: transform;
+        transform: translateZ(0);
+        opacity: 1 !important;
+        transition: opacity 0.1s ease-out;
       }
     }
   }
@@ -115,25 +130,40 @@
           &.sticky-left-0 {
             position: sticky;
             left: 0;
-            background: white;
+            background: white !important;
+            background-color: white !important;
             z-index: 5;
             box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+            will-change: transform;
+            transform: translateZ(0);
+            opacity: 1 !important;
+            transition: opacity 0.1s ease-out;
           }
 
           &.sticky-left-1 {
             position: sticky;
             left: 60px;
-            background: white;
+            background: white !important;
+            background-color: white !important;
             z-index: 4;
             box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+            will-change: transform;
+            transform: translateZ(0);
+            opacity: 1 !important;
+            transition: opacity 0.1s ease-out;
           }
 
           &.sticky-left-2 {
             position: sticky;
             left: 108px;
-            background: white;
+            background: white !important;
+            background-color: white !important;
             z-index: 3;
             box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+            will-change: transform;
+            transform: translateZ(0);
+            opacity: 1 !important;
+            transition: opacity 0.1s ease-out;
           }
         }
 
@@ -143,7 +173,9 @@
             &.sticky-left-0,
             &.sticky-left-1,
             &.sticky-left-2 {
-              background: #f9fafb;
+              background: #f9fafb !important;
+              background-color: #f9fafb !important;
+              opacity: 1 !important;
             }
           }
         }
@@ -151,38 +183,50 @@
         // Operation-specific sticky cell backgrounds
         &.operation-insert .tabulator-cell {
           &.sticky-left-0, &.sticky-left-1, &.sticky-left-2 {
-            background-color: rgba(16, 185, 129, 0.05);
+            background: rgba(16, 185, 129, 0.05) !important;
+            background-color: rgba(16, 185, 129, 0.05) !important;
+            opacity: 1 !important;
           }
         }
 
         &.operation-update .tabulator-cell {
           &.sticky-left-0, &.sticky-left-1, &.sticky-left-2 {
-            background-color: rgba(108, 173, 223, 0.05);
+            background: rgba(108, 173, 223, 0.05) !important;
+            background-color: rgba(108, 173, 223, 0.05) !important;
+            opacity: 1 !important;
           }
         }
 
         &.operation-delete .tabulator-cell {
           &.sticky-left-0, &.sticky-left-1, &.sticky-left-2 {
-            background-color: rgba(239, 68, 68, 0.05);
+            background: rgba(239, 68, 68, 0.05) !important;
+            background-color: rgba(239, 68, 68, 0.05) !important;
+            opacity: 1 !important;
           }
         }
 
         // Operation-specific sticky cell hover backgrounds
         &.operation-insert:hover .tabulator-cell {
           &.sticky-left-0, &.sticky-left-1, &.sticky-left-2 {
-            background-color: rgba(16, 185, 129, 0.1);
+            background: rgba(16, 185, 129, 0.1) !important;
+            background-color: rgba(16, 185, 129, 0.1) !important;
+            opacity: 1 !important;
           }
         }
 
         &.operation-update:hover .tabulator-cell {
           &.sticky-left-0, &.sticky-left-1, &.sticky-left-2 {
-            background-color: rgba(108, 173, 223, 0.1);
+            background: rgba(108, 173, 223, 0.1) !important;
+            background-color: rgba(108, 173, 223, 0.1) !important;
+            opacity: 1 !important;
           }
         }
 
         &.operation-delete:hover .tabulator-cell {
           &.sticky-left-0, &.sticky-left-1, &.sticky-left-2 {
-            background-color: rgba(239, 68, 68, 0.1);
+            background: rgba(239, 68, 68, 0.1) !important;
+            background-color: rgba(239, 68, 68, 0.1) !important;
+            opacity: 1 !important;
           }
         }
       }

data/app/controllers/dbwatcher/api/v1/system_info_controller.rb

@@ -166,7 +166,7 @@ module Dbwatcher
         #
         # @return [void]
         def ensure_system_info_enabled
-          return if Dbwatcher.configuration.collect_system_info
+          return if Dbwatcher.configuration.system_info
 
           render json: {
             error: "System information collection is disabled",

data/app/controllers/dbwatcher/dashboard_controller.rb

@@ -10,7 +10,7 @@ module Dbwatcher
       @active_tab = params[:tab] || "overview"
 
       # Add system information if enabled
-      return unless Dbwatcher.configuration.collect_system_info
+      return unless Dbwatcher.configuration.system_info
 
       @system_info_summary = system_info_storage.summary
       @system_info = system_info_storage.cached_info

data/app/views/dbwatcher/dashboard/_overview.html.erb

@@ -118,10 +118,11 @@
           </div>
         <% else %>
           <div class="p-8 text-center text-gray-500">
-            <svg class="w-8 h-8 mx-auto text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
-            </svg>
+            <%= image_tag "dbwatcher/dbwatcher-tranparent_512x512.png", 
+                  alt: "DBWatcher Logo", 
+                  class: "w-12 h-12 mx-auto opacity-30 mb-2" %>
             <p class="text-sm">No recent sessions</p>
+            <p class="text-xs text-gray-400 mt-1">Start tracking with <code>?dbwatch=true</code></p>
           </div>
         <% end %>
       </div>
@@ -175,11 +176,11 @@
           </div>
         <% else %>
           <div class="p-8 text-center text-gray-500">
-            <svg class="w-8 h-8 mx-auto text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5a2 2 0 012-2h2a2 2 0 012 2v2H8V5z"/>
-            </svg>
+            <%= image_tag "dbwatcher/dbwatcher-tranparent_512x512.png", 
+                  alt: "DBWatcher Logo", 
+                  class: "w-12 h-12 mx-auto opacity-30 mb-2" %>
             <p class="text-sm">No active tables</p>
+            <p class="text-xs text-gray-400 mt-1">Tables will appear when data changes</p>
           </div>
         <% end %>
       </div>