dbwatcher 0.1.5 → 1.1.0

data/app/views/dbwatcher/sessions/components/changes/_table_list.html.erb

@@ -0,0 +1,96 @@
+<!-- Table List Navigation -->
+<div class="bg-white border-b border-gray-200 p-4">
+  <h3 class="text-sm font-medium text-gray-900 mb-3">Tables with Changes</h3>
+  <div class="flex flex-wrap gap-2">
+    <template x-for="[tableName, summary] in Object.entries(tablesData)" :key="tableName">
+      <button
+        @click="scrollToTable(tableName)"
+        class="px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded-md transition-colors">
+        <span x-text="tableName"></span>
+        <span class="ml-1 text-gray-500" x-text="`(${Object.values(summary.changes || {}).reduce((sum, count) => sum + count, 0)})`"></span>
+      </button>
+    </template>
+  </div>
+</div>
+
+<!-- Table Details -->
+<template x-for="[tableName, summary] in Object.entries(tablesData)" :key="tableName">
+  <div :id="`table-${tableName}`" class="border-b border-gray-300" :data-table-name="tableName">
+    <!-- Table Header -->
+    <div class="bg-gray-50 px-4 py-3 border-b border-gray-200">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center space-x-3">
+          <h4 class="text-sm font-medium text-gray-900" x-text="tableName"></h4>
+          <div class="flex space-x-2">
+            <template x-for="[operation, count] in Object.entries(summary.changes || {})" :key="operation">
+              <span :class="getOperationClass(operation)" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium">
+                <span x-text="`${operation}: ${count}`"></span>
+              </span>
+            </template>
+          </div>
+        </div>
+        <button
+          @click="toggleColumnSelector(tableName)"
+          class="text-sm text-blue-600 hover:text-blue-800">
+          Configure Columns
+        </button>
+      </div>
+    </div>
+
+    <!-- Column Selector -->
+    <div x-show="showColumnSelector === tableName" x-collapse class="bg-gray-50 px-4 py-3 border-b border-gray-200">
+      <div class="flex items-center justify-between mb-2">
+        <span class="text-sm font-medium text-gray-700">Column Visibility</span>
+        <div class="space-x-2">
+          <button @click="selectAllColumns(tableName)" class="text-xs text-blue-600 hover:text-blue-800">All</button>
+          <button @click="selectNoneColumns(tableName)" class="text-xs text-blue-600 hover:text-blue-800">None</button>
+        </div>
+      </div>
+      <div class="grid grid-cols-4 gap-2">
+        <template x-for="[column, visible] in Object.entries(tableColumns[tableName] || {})" :key="column">
+          <label class="flex items-center space-x-2">
+            <input
+              type="checkbox"
+              :checked="visible"
+              @change="tableColumns[tableName][column] = $event.target.checked"
+              class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
+            <span class="text-xs text-gray-700" x-text="column"></span>
+          </label>
+        </template>
+      </div>
+    </div>
+
+    <!-- Table Content -->
+    <div class="overflow-auto">
+      <table class="compact-table w-full">
+        <thead>
+          <tr class="sticky top-0 bg-gray-100 z-10">
+            <th class="text-center w-16 sticky left-0 bg-gray-100 z-20 border-r border-gray-300">
+              <span class="text-xs">Op</span>
+            </th>
+            <th class="text-left w-24 sticky bg-gray-100 z-20 border-r border-gray-300">Time</th>
+            <template x-for="[column, visible] in Object.entries(tableColumns[tableName] || {})" :key="column">
+              <th x-show="visible" class="text-left min-w-32 px-2" x-text="column"></th>
+            </template>
+          </tr>
+        </thead>
+        <tbody>
+          <template x-for="(change, index) in summary.changes || []" :key="index">
+            <tr class="hover:bg-gray-50">
+              <td class="text-center sticky left-0 bg-white z-10">
+                <span :class="getOperationClass(change.operation)" class="inline-block w-2 h-2 rounded-full"></span>
+              </td>
+              <td class="sticky bg-white z-10" x-text="formatTimestamp(change.timestamp)"></td>
+              <template x-for="[column, visible] in Object.entries(tableColumns[tableName] || {})" :key="column">
+                <td x-show="visible" class="px-2">
+                  <span x-text="change.data?.[column] || '--'"></span>
+                  <span x-show="hasColumnChanges(change, column)" class="ml-1 text-xs text-orange-600">*</span>
+                </td>
+              </template>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

data/app/views/dbwatcher/sessions/diagrams.html.erb

@@ -0,0 +1,21 @@
+<div class="h-full flex flex-col">
+  <%= render partial: 'session_header', locals: { session: @session } %>
+
+  <!-- Tab Bar with URL-based navigation -->
+  <div class="tab-bar">
+    <%= link_to changes_session_path(@session.id), class: "tab-item" do %>
+      Changes
+    <% end %>
+    <%= link_to summary_session_path(@session.id), class: "tab-item" do %>
+      Summary
+    <% end %>
+    <%= link_to diagrams_session_path(@session.id), class: "tab-item active" do %>
+      Diagrams
+    <% end %>
+  </div>
+
+  <!-- Diagrams Content -->
+  <div class="flex-1 overflow-auto">
+    <%= render partial: 'diagrams_tab' %>
+  </div>
+</div>

data/app/views/dbwatcher/sessions/index.html.erb

@@ -1,37 +1,134 @@
-<div class="px-4 sm:px-0">
-  <h2 class="text-2xl font-bold mb-6">Tracking Sessions</h2>
+<%# Sessions Index Page %>
+<div class="h-full flex flex-col">
+  <%= render 'dbwatcher/shared/header', title: 'Tracking Sessions', subtitle: "#{@sessions.count} sessions" %>
+
+  <%= render 'dbwatcher/shared/tab_bar', tabs: [
+    { name: 'All Sessions', active: true },
+    { name: 'Active', active: false },
+    { name: 'Recent', active: false }
+  ] %>
+
+  <!-- Toolbar -->
+  <div class="h-8 bg-gray-100 border-b border-gray-300 flex items-center px-4 gap-2">
+    <input type="text" placeholder="Filter sessions..."
+           class="compact-input flex-1 max-w-xs">
+    <select class="compact-select">
+      <option>Last 24 hours</option>
+      <option>Last week</option>
+      <option>All time</option>
+    </select>
+
+    <div class="ml-auto flex items-center gap-2">
+      <button class="compact-button bg-blue-medium text-white hover:bg-blue-700">
+        <svg class="w-3 h-3 inline mr-1" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"/>
+        </svg>
+        Refresh
+      </button>
+
+      <%= button_to clear_sessions_path,
+                    method: :delete,
+                    class: "compact-button bg-red-600 text-white hover:bg-red-700",
+                    data: {
+                      confirm: "Are you sure you want to clear all sessions? This action cannot be undone."
+                    } do %>
+        <svg class="w-3 h-3 inline mr-1" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 012 0v4a1 1 0 11-2 0V7zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V7a1 1 0 00-1-1z"/>
+        </svg>
+        Clear Sessions
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Content Area -->
+  <div class="flex-1 overflow-auto p-4">
 
   <% if @sessions.empty? %>
-    <div class="bg-white overflow-hidden shadow rounded-lg p-6 text-center text-gray-500">
-      No tracking sessions yet. Start tracking with <code class="bg-gray-100 px-2 py-1 rounded">Dbwatcher.track { ... }</code>
+    <div class="flex items-center justify-center h-full text-gray-500">
+      <div class="text-center">
+        <svg class="mx-auto h-8 w-8 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
+                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
+        </svg>
+        <p class="text-xs">No tracking sessions yet</p>
+        <p class="text-xs text-gray-400">Start tracking with <code class="bg-gray-200 px-1 rounded">Dbwatcher.track { ... }</code></p>
+      </div>
     </div>
   <% else %>
-    <div class="bg-white shadow overflow-hidden sm:rounded-md">
-      <ul class="divide-y divide-gray-200">
+    <table class="compact-table w-full">
+      <thead>
+        <tr>
+          <th class="text-left" style="min-width:180px; max-width:260px; width:18%">Session ID</th>
+          <th class="text-left" style="min-width:160px; max-width:260px; width:22%">Name</th>
+          <th class="text-center">Status</th>
+          <th class="text-center">Changes</th>
+          <th class="text-right">Started</th>
+          <th class="text-right">Duration</th>
+          <th class="text-center">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
         <% @sessions.each do |session| %>
-          <li>
-            <%= link_to session_path(session[:id]), class: "block hover:bg-gray-50 px-4 py-4 sm:px-6" do %>
-              <div class="flex items-center justify-between">
-                <div class="flex-1">
-                  <p class="text-sm font-medium text-indigo-600 truncate">
-                    <%= session[:name] %>
-                  </p>
-                  <p class="mt-1 text-sm text-gray-600">
-                    <%= Time.parse(session[:started_at]).strftime("%Y-%m-%d %H:%M:%S") %>
-                    <span class="text-gray-400">•</span>
-                    <%= session[:change_count] %> changes
-                  </p>
-                </div>
-                <div class="ml-2 flex-shrink-0">
-                  <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+          <tr class="hover:bg-blue-50">
+            <td class="font-mono text-xs" style="min-width:180px; max-width:260px; width:18%">
+              <span class="inline-block whitespace-nowrap overflow-x-auto" style="max-width:260px;">
+                <%= safe_value(session, :id) %>
+              </span>
+            </td>
+            <td style="min-width:160px; max-width:260px; width:22%" title="<%= safe_value(session, :name) %>">
+              <%= link_to display_session_name(safe_value(session, :name)),
+                  session_path(safe_value(session, :id)),
+                  class: "text-navy-dark hover:text-blue-medium whitespace-normal break-words inline-block",
+                  style: "max-width:260px; overflow-x:auto; display:inline-block;" %>
+            </td>
+            <td class="text-center">
+              <%= render 'dbwatcher/shared/badge',
+                  content: (session_active?(session) ? 'Active' : 'Completed'),
+                  badge_class: (session_active?(session) ? 'badge-success' : 'badge-primary') %>
+            </td>
+            <td class="text-center">
+              <% change_count = session_change_count(session) %>
+              <%= render 'dbwatcher/shared/badge',
+                  content: change_count > 99 ? "#{change_count}" : change_count,
+                  badge_class: 'bg-gray-600 text-white whitespace-nowrap' %>
+            </td>
+            <td class="text-right text-xs whitespace-nowrap">
+              <%= format_timestamp(safe_value(session, :started_at)) %>
+            </td>
+            <td class="text-right text-xs whitespace-nowrap">
+              <% if session_active?(session) %>
+                <span class="text-blue-600">Active</span>
+              <% else %>
+                <%= distance_of_time_in_words(
+                    Time.parse(safe_value(session, :started_at)),
+                    Time.parse(safe_value(session, :ended_at))
+                  ) rescue 'N/A' %>
+              <% end %>
+            </td>
+            <td class="text-center">
+              <div class="flex gap-1 justify-end">
+                <%= link_to session_path(safe_value(session, :id)),
+                    class: "compact-button bg-navy-dark text-white hover:bg-blue-medium" do %>
+                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                   </svg>
-                </div>
+                <% end %>
               </div>
-            <% end %>
-          </li>
+            </td>
+          </tr>
         <% end %>
-      </ul>
-    </div>
+      </tbody>
+    </table>
   <% end %>
+
+  <!-- Status Bar -->
+  <div class="h-6 bg-gray-100 border-t border-gray-300 flex items-center px-4 text-xs text-gray-600">
+    <%= @sessions.count %> sessions total •
+    <%= @sessions.count { |s| session_active?(s) } %> active •
+    Last updated: <%= Time.current.strftime("%H:%M:%S") %>
+  </div>
 </div>

data/app/views/dbwatcher/sessions/shared/_layout.html.erb

@@ -0,0 +1,8 @@
+<div class="h-full flex flex-col" x-data="sessionNavigation('<%= @session.id %>')">
+  <%= render 'dbwatcher/sessions/shared/session_header', session: @session %>
+  <%= render 'dbwatcher/sessions/shared/navigation' %>
+
+  <div class="flex-1 overflow-auto">
+    <%= yield %>
+  </div>
+</div>

data/app/views/dbwatcher/sessions/shared/_navigation.html.erb

@@ -0,0 +1,35 @@
+<nav class="bg-white border-b border-gray-200" x-data="sessionNavigation('<%= @session.id %>')">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex justify-between h-16">
+      <div class="flex">
+        <div class="flex-shrink-0 flex items-center">
+          <h1 class="text-xl font-semibold text-gray-900">
+            Session <%= @session.id %>
+          </h1>
+        </div>
+        <div class="ml-6 flex space-x-8">
+          <a href="<%= changes_session_path(@session.id) %>"
+             @click.prevent="$store.session.setView('changes')"
+             :class="$store.session.currentView === 'changes' ? 'border-blue-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
+             class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors">
+            Changes
+          </a>
+
+          <a href="<%= summary_session_path(@session.id) %>"
+             @click.prevent="$store.session.setView('summary')"
+             :class="$store.session.currentView === 'summary' ? 'border-blue-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
+             class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors">
+            Summary
+          </a>
+
+          <a href="<%= diagrams_session_path(@session.id) %>"
+             @click.prevent="$store.session.setView('diagrams')"
+             :class="$store.session.currentView === 'diagrams' ? 'border-blue-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
+             class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors">
+            Diagrams
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>

data/app/views/dbwatcher/sessions/shared/_session_header.html.erb

@@ -0,0 +1,25 @@
+<div class="bg-white border-b border-gray-200 px-4 py-3">
+  <div class="flex items-center justify-between">
+    <div class="flex items-center space-x-4">
+      <h1 class="text-xl font-semibold text-gray-900">
+        Session <%= display_session_id(session.id) %>
+      </h1>
+      <div class="text-sm text-gray-500">
+        <% if session.started_at %>
+          <% started_time = session.started_at.is_a?(String) ? session.started_at : session.started_at.strftime('%Y-%m-%d %H:%M:%S') %>
+          <span>Started: <%= started_time %></span>
+        <% else %>
+          <span>Started: Unknown</span>
+        <% end %>
+        <% if session.ended_at %>
+          <% ended_time = session.ended_at.is_a?(String) ? session.ended_at : session.ended_at.strftime('%Y-%m-%d %H:%M:%S') %>
+          <span class="ml-4">Ended: <%= ended_time %></span>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="flex items-center space-x-3">
+      <%= link_to 'All Sessions', sessions_path, class: 'text-sm text-blue-600 hover:text-blue-800' %>
+    </div>
+  </div>
+</div>

data/app/views/dbwatcher/sessions/show.html.erb

@@ -1,150 +1,4 @@
-<div x-data="sessionViewer(<%= @session.to_h.to_json %>)" class="space-y-6">
-  <div class="flex justify-between items-center">
-    <h2 class="text-2xl font-bold" x-text="session.name"></h2>
-    <button @click="showFullRecords = !showFullRecords"
-            class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded flex items-center gap-2">
-      <span x-text="showFullRecords ? 'Show Changes Only' : 'Show Full Records'"></span>
-    </button>
-  </div>
-
-  <!-- Summary -->
-  <div class="bg-white shadow rounded-lg p-6">
-    <h3 class="text-lg font-semibold mb-4">Summary</h3>
-    <div class="grid grid-cols-3 gap-4">
-      <template x-for="[key, count] in Object.entries(session.summary)" :key="key">
-        <div class="text-sm">
-          <span x-text="key.split(',')[0]" class="font-medium"></span>
-          <span x-text="key.split(',')[1]" :class="getOperationColor(key.split(',')[1])"></span>:
-          <span x-text="count"></span>
-        </div>
-      </template>
-    </div>
-  </div>
-
-  <!-- Changes by Table -->
-  <div class="bg-white shadow rounded-lg p-6">
-    <h3 class="text-lg font-semibold mb-4">Database Changes</h3>
-
-    <div class="space-y-2">
-      <template x-for="table in groupedChanges" :key="table.name">
-        <div class="border rounded">
-          <button @click="table.expanded = !table.expanded"
-                  class="w-full px-4 py-3 flex items-center justify-between hover:bg-gray-50">
-            <div class="flex items-center gap-2">
-              <svg class="w-4 h-4 transition-transform" :class="{'rotate-90': table.expanded}" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-              </svg>
-              <span class="font-medium" x-text="table.name"></span>
-              <span class="text-sm text-gray-500" x-text="`(${table.changes.length} changes)`"></span>
-            </div>
-          </button>
-
-          <div x-show="table.expanded" x-collapse class="border-t">
-            <template x-for="record in table.records" :key="record.id">
-              <div class="border-b last:border-0">
-                <button @click="record.expanded = !record.expanded"
-                        class="w-full px-6 py-2 flex items-center gap-2 hover:bg-gray-50 text-left">
-                  <svg class="w-4 h-4 transition-transform" :class="{'rotate-90': record.expanded}" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-                  </svg>
-                  <span x-text="`Record #${record.id}`"></span>
-                </button>
-
-                <div x-show="record.expanded" x-collapse class="px-8 pb-4">
-                  <template x-for="change in record.changes" :key="change.timestamp">
-                    <div class="mt-3">
-                      <div class="font-medium mb-2" :class="getOperationColor(change.operation)">
-                        <span x-text="change.operation"></span> at
-                        <span x-text="new Date(change.timestamp).toLocaleTimeString()"></span>
-                      </div>
-
-                      <div x-show="!showFullRecords" class="space-y-1">
-                        <template x-for="col in change.changes" :key="col.column">
-                          <div class="text-sm">
-                            <span class="font-medium" x-text="col.column + ':'"></span>
-                            <template x-if="col.old_value">
-                              <span>
-                                <span class="text-red-600 line-through" x-text="col.old_value"></span>
-                                <span class="mx-1">→</span>
-                              </span>
-                            </template>
-                            <span class="text-green-600" x-text="col.new_value || 'null'"></span>
-                          </div>
-                        </template>
-                      </div>
-
-                      <div x-show="showFullRecords" class="bg-gray-50 p-3 rounded text-sm font-mono">
-                        <pre x-text="JSON.stringify(change.record_snapshot, null, 2)"></pre>
-                      </div>
-                    </div>
-                  </template>
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-      </template>
-    </div>
-  </div>
+<!-- This view is only used for redirects now -->
+<div>
+  <p>Redirecting to changes...</p>
 </div>
-
-<script>
-function sessionViewer(sessionData) {
-  return {
-    session: sessionData,
-    showFullRecords: false,
-    groupedChanges: [],
-
-    init() {
-      // Calculate summary from changes
-      const summary = {};
-      this.session.changes.forEach(change => {
-        const key = `${change.table_name},${change.operation}`;
-        summary[key] = (summary[key] || 0) + 1;
-      });
-      this.session.summary = summary;
-
-      // Group changes by table and record
-      const tables = {};
-
-      this.session.changes.forEach(change => {
-        if (!tables[change.table_name]) {
-          tables[change.table_name] = {
-            name: change.table_name,
-            expanded: false,
-            changes: [],
-            records: {}
-          };
-        }
-
-        tables[change.table_name].changes.push(change);
-
-        if (!tables[change.table_name].records[change.record_id]) {
-          tables[change.table_name].records[change.record_id] = {
-            id: change.record_id,
-            expanded: false,
-            changes: []
-          };
-        }
-
-        tables[change.table_name].records[change.record_id].changes.push(change);
-      });
-
-      // Convert to array format
-      this.groupedChanges = Object.values(tables).map(table => ({
-        ...table,
-        records: Object.values(table.records)
-      }));
-    },
-
-    getOperationColor(operation) {
-      const colors = {
-        'INSERT': 'text-green-600',
-        'UPDATE': 'text-blue-600',
-        'DELETE': 'text-red-600'
-      };
-      return colors[operation] || 'text-gray-600';
-    }
-  };
-}
-</script>

data/app/views/dbwatcher/sessions/summary.html.erb

@@ -0,0 +1,21 @@
+<div class="h-full flex flex-col">
+  <%= render partial: 'session_header', locals: { session: @session } %>
+
+  <!-- Tab Bar with URL-based navigation -->
+  <div class="tab-bar">
+    <%= link_to changes_session_path(@session.id), class: "tab-item" do %>
+      Changes
+    <% end %>
+    <%= link_to summary_session_path(@session.id), class: "tab-item active" do %>
+      Summary
+    <% end %>
+    <%= link_to diagrams_session_path(@session.id), class: "tab-item" do %>
+      Diagrams
+    <% end %>
+  </div>
+
+  <!-- Summary Content -->
+  <div class="flex-1 overflow-auto">
+    <%= render partial: 'summary_tab', locals: { tables_summary: @tables_summary } %>
+  </div>
+</div>

data/app/views/dbwatcher/shared/_badge.html.erb

@@ -0,0 +1,4 @@
+<%# Reusable badge component %>
+<span class="badge <%= local_assigns[:badge_class] || 'bg-gray-600 text-white' %>" <%= "title=\"#{local_assigns[:tooltip]}\"".html_safe if local_assigns[:tooltip] %>>
+  <%= local_assigns[:content] %>
+</span>

data/app/views/dbwatcher/shared/_data_table.html.erb

@@ -0,0 +1,20 @@
+<%# Reusable data table component %>
+<div class="border border-gray-300 rounded">
+  <div class="bg-gray-100 px-3 py-2 border-b border-gray-300">
+    <h3 class="text-xs font-medium text-gray-700"><%= local_assigns[:title] %></h3>
+  </div>
+  <div class="max-h-64 overflow-auto">
+    <table class="compact-table w-full">
+      <thead>
+        <tr>
+          <% (local_assigns[:headers] || []).each do |header| %>
+            <th class="<%= header[:class] || 'text-left' %>"><%= header[:label] %></th>
+          <% end %>
+        </tr>
+      </thead>
+      <tbody>
+        <%= yield %>
+      </tbody>
+    </table>
+  </div>
+</div>

data/app/views/dbwatcher/shared/_header.html.erb

@@ -0,0 +1,7 @@
+<%# Reusable header component for all pages %>
+<div class="h-10 bg-navy-dark text-white flex items-center px-4">
+  <h1 class="text-sm font-medium"><%= local_assigns[:title] %></h1>
+  <span class="ml-auto text-xs text-blue-light">
+    <%= local_assigns[:subtitle] %>
+  </span>
+</div>

data/app/views/dbwatcher/shared/_page_layout.html.erb

@@ -0,0 +1,20 @@
+<%# Standard page layout wrapper %>
+<div class="h-full flex flex-col">
+  <%= render 'dbwatcher/shared/header', title: local_assigns[:page_title], subtitle: local_assigns[:page_subtitle] %>
+  
+  <% if local_assigns[:tabs] %>
+    <%= render 'dbwatcher/shared/tab_bar', tabs: local_assigns[:tabs] %>
+  <% end %>
+  
+  <% if local_assigns[:toolbar] %>
+    <!-- Toolbar -->
+    <div class="h-8 bg-gray-100 border-b border-gray-300 flex items-center px-4 gap-2">
+      <%= local_assigns[:toolbar] %>
+    </div>
+  <% end %>
+  
+  <!-- Content Area -->
+  <div class="flex-1 overflow-auto p-4">
+    <%= yield %>
+  </div>
+</div>

data/app/views/dbwatcher/shared/_section_panel.html.erb

@@ -0,0 +1,9 @@
+<%# Reusable section panel component %>
+<div class="<%= local_assigns[:classes] || 'mt-4' %> border border-gray-300 rounded">
+  <div class="bg-gray-100 px-3 py-2 border-b border-gray-300">
+    <h3 class="text-xs font-medium text-gray-700"><%= local_assigns[:title] %></h3>
+  </div>
+  <div class="<%= local_assigns[:content_classes] || 'p-4' %>">
+    <%= yield %>
+  </div>
+</div>

data/app/views/dbwatcher/shared/_stats_card.html.erb

@@ -0,0 +1,11 @@
+<%# Enhanced stats card component %>
+<div class="border border-gray-300 rounded bg-white p-3">
+  <div class="flex items-center justify-between mb-2">
+    <span class="text-xs text-gray-600"><%= local_assigns[:label] %></span>
+    <%= local_assigns[:icon_html]&.html_safe if local_assigns[:icon_html] %>
+  </div>
+  <div class="text-2xl font-bold <%= local_assigns[:value_class] || 'text-navy-dark' %>">
+    <%= local_assigns[:value] || 0 %>
+  </div>
+  <div class="text-xs text-gray-500 mt-1"><%= local_assigns[:description] %></div>
+</div>

data/app/views/dbwatcher/shared/_tab_bar.html.erb

@@ -0,0 +1,6 @@
+<%# Reusable tab bar component %>
+<div class="tab-bar">
+  <% (local_assigns[:tabs] || []).each do |tab| %>
+    <div class="tab-item <%= 'active' if tab[:active] %>"><%= tab[:name] %></div>
+  <% end %>
+</div>