dbwatcher 1.0.0 → 1.1.1

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

@@ -59,8 +59,8 @@
     <table class="compact-table w-full">
       <thead>
         <tr>
-          <th class="text-left">Session ID</th>
-          <th class="text-left">Name</th>
+          <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>
@@ -71,13 +71,16 @@
       <tbody>
         <% @sessions.each do |session| %>
           <tr class="hover:bg-blue-50">
-            <td class="font-mono text-xs">
-              <%= display_session_id(safe_value(session, :id)) %>
+            <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 class="max-w-xs truncate" title="<%= safe_value(session, :name) %>">
+            <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" %>
+                  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',
@@ -85,14 +88,15 @@
                   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: session_change_count(session),
-                  badge_class: 'bg-gray-600 text-white' %>
+                  content: change_count > 99 ? "#{change_count}" : change_count,
+                  badge_class: 'bg-gray-600 text-white whitespace-nowrap' %>
             </td>
-            <td class="text-right text-xs">
+            <td class="text-right text-xs whitespace-nowrap">
               <%= format_timestamp(safe_value(session, :started_at)) %>
             </td>
-            <td class="text-right text-xs">
+            <td class="text-right text-xs whitespace-nowrap">
               <% if session_active?(session) %>
                 <span class="text-blue-600">Active</span>
               <% else %>

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,347 +1,4 @@
-<div class="h-full flex flex-col" x-data="sessionView()">
-  <!-- Compact Header -->
-  <div class="h-10 bg-navy-dark text-white flex items-center px-4">
-    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
-      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
-    </svg>
-    <h1 class="text-sm font-medium truncate"><%= @session.name %></h1>
-    <span class="ml-auto text-xs text-blue-light">
-      <%= Time.parse(@session.started_at.to_s).strftime("%H:%M:%S") rescue @session.started_at %> - 
-      <%= Time.parse(@session.ended_at.to_s).strftime("%H:%M:%S") rescue @session.ended_at %>
-    </span>
-  </div>
-  
-  <!-- Tab Bar -->
-  <div class="tab-bar">
-    <div class="tab-item" :class="{ active: activeTab === 'changes' }" @click="activeTab = 'changes'">Changes</div>
-    <div class="tab-item" :class="{ active: activeTab === 'summary' }" @click="activeTab = 'summary'">Summary</div>
-  </div>
-  
-  <!-- Compact Toolbar -->
-  <div class="bg-gray-100 border-b border-gray-300 px-3 py-1 flex items-center gap-3">
-    
-    <div class="ml-auto flex items-center gap-2">
-      <button @click="exportData()" 
-              class="compact-button bg-white border border-gray-300 hover:bg-gray-50">
-        <svg class="w-3 h-3 inline mr-1" fill="currentColor" viewBox="0 0 20 20">
-          <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"/>
-        </svg>
-        Export
-      </button>
-    </div>
-  </div>
-  
-  
-  <!-- Content -->
-  <div class="flex-1 overflow-auto">
-    <!-- Summary Tab -->
-    <div x-show="activeTab === 'summary'" class="p-4">
-      <div class="grid grid-cols-3 gap-3 mb-4">
-        <% @tables_summary.each do |table_name, summary| %>
-          <div class="border border-gray-300 rounded p-3 hover:shadow-md cursor-pointer bg-white"
-               @click="activeTab = 'changes'; scrollToTable('<%= table_name %>')">
-            <h4 class="text-sm font-medium text-navy-dark mb-2"><%= table_name %></h4>
-            <div class="space-y-1 text-xs">
-              <div class="flex justify-between">
-                <span class="badge badge-insert">INSERT</span>
-                <span><%= summary[:operations]['INSERT'] %></span>
-              </div>
-              <div class="flex justify-between">
-                <span class="badge badge-update">UPDATE</span>
-                <span><%= summary[:operations]['UPDATE'] %></span>
-              </div>
-              <div class="flex justify-between">
-                <span class="badge badge-delete">DELETE</span>
-                <span><%= summary[:operations]['DELETE'] %></span>
-              </div>
-            </div>
-          </div>
-        <% end %>
-      </div>
-    </div>
-    
-    <!-- Changes Tab -->
-    <div x-show="activeTab === 'changes'" class="h-full">
-      <% @tables_summary.each do |table_name, summary| %>
-        <div class="border-b border-gray-300" x-data="{ expanded: true }">
-          <!-- Table Header with Column Controls -->
-          <div class="bg-gray-100 px-3 py-2 flex items-center cursor-pointer" 
-               @click="expanded = !expanded"
-               :id="`table-${table_name}`">
-            <svg class="w-3 h-3 mr-2 transition-transform" 
-                 :class="{ 'rotate-90': 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 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
-            </svg>
-            <h3 class="text-sm font-medium text-gray-900 flex-1"><%= table_name %></h3>
-            <div class="flex gap-2 mr-4">
-              <% summary[:operations].each do |op, count| %>
-                <% next if count == 0 %>
-                <span class="badge badge-<%= op.downcase %>"><%= count %></span>
-              <% end %>
-            </div>
-            <!-- Column Visibility Button -->
-            <button @click.stop="toggleColumnSelector('<%= table_name %>')"
-                    class="text-xs bg-white border border-gray-300 px-2 py-1 rounded hover:bg-gray-50 relative">
-              Columns
-            </button>
-          </div>
-          
-          <!-- Column Selector Dropdown -->
-          <div x-show="showColumnSelector === '<%= table_name %>'"
-               x-transition
-               @click.away="showColumnSelector = null"
-               class="absolute z-50 bg-white border border-gray-300 rounded shadow-lg p-3 max-h-64 overflow-auto"
-               style="right: 1rem; margin-top: -2px;">
-            <div class="text-xs font-medium mb-2">Select Visible Columns:</div>
-            <div class="space-y-1 min-w-48">
-              <% if summary[:sample_record] %>
-                <% summary[:sample_record].keys.each do |column| %>
-                  <label class="flex items-center text-xs hover:bg-gray-50 p-1 rounded">
-                    <input type="checkbox" 
-                           x-model="tableColumns['<%= table_name %>']['<%= column %>']"
-                           class="mr-2">
-                    <span class="flex-1"><%= column.to_s.humanize %></span>
-                  </label>
-                <% end %>
-              <% end %>
-            </div>
-            <div class="mt-2 pt-2 border-t border-gray-200 flex gap-1">
-              <button @click="selectAllColumns('<%= table_name %>')" 
-                      class="text-xs bg-blue-600 text-white px-2 py-1 rounded hover:bg-blue-700">All</button>
-              <button @click="selectNoneColumns('<%= table_name %>')" 
-                      class="text-xs bg-gray-600 text-white px-2 py-1 rounded hover:bg-gray-700">None</button>
-            </div>
-          </div>
-          
-          <!-- Table Content with Horizontal Scroll -->
-          <div x-show="expanded" x-collapse class="overflow-auto">
-            <div class="min-w-full">
-              <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>
-                    <% if summary[:sample_record] %>
-                      <% summary[:sample_record].keys.each do |column| %>
-                        <th class="text-left min-w-32 px-2" 
-                            x-show="tableColumns['<%= table_name %>']['<%= column %>']">
-                          <%= column.to_s.humanize %>
-                        </th>
-                      <% end %>
-                    <% end %>
-                  </tr>
-                </thead>
-                <tbody>
-                  <% summary[:changes].each_with_index do |change, index| %>
-                    <% row_id = "#{table_name}_row_#{index}" %>
-                    <% operation = change['operation'] || change[:operation] %>
-                    <% timestamp = change['timestamp'] || change[:timestamp] %>
-                    <% snapshot = change['record_snapshot'] || change[:record_snapshot] || {} %>
-                    <% column_changes = change['changes'] || change[:changes] %>
-                    
-                    <tbody x-data="{ expanded: false }">
-                      <tr class="hover:bg-blue-50">
-                        <td class="text-center sticky left-0 bg-white z-10 border-r border-gray-200 w-16">
-                          <div class="flex items-center justify-center gap-1">
-                            <!-- Expand/Collapse Button -->
-                            <button @click="expanded = !expanded" 
-                                    class="text-gray-400 hover:text-gray-600 transition-colors p-1 rounded hover:bg-gray-100">
-                              <svg class="w-3 h-3 transition-transform" 
-                                   :class="{ 'rotate-90': 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 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
-                              </svg>
-                            </button>
-                            <!-- Operation Badge -->
-                            <% if operation %>
-                              <span class="badge badge-<%= operation.downcase %>">
-                                <%= operation[0] %>
-                              </span>
-                            <% else %>
-                              <span class="badge">?</span>
-                            <% end %>
-                          </div>
-                        </td>
-                        <td class="text-xs text-gray-600 sticky bg-white z-10 border-r border-gray-200 w-24">
-                          <% if timestamp %>
-                            <%= Time.parse(timestamp.to_s).strftime("%H:%M:%S") rescue timestamp %>
-                          <% else %>
-                            <span class="text-gray-400">--</span>
-                          <% end %>
-                        </td>
-                        
-                        <% if snapshot %>
-                          <% snapshot.each do |key, value| %>
-                            <td x-show="tableColumns['<%= table_name %>']['<%= key %>']" 
-                                class="relative px-2"
-                                @click.stop="">
-                              <% changed_column = column_changes&.find { |c| (c['column'] || c[:column]) == key.to_s } %>
-                              <div class="min-w-32 max-w-48 truncate">
-                                <% if operation == 'UPDATE' && changed_column %>
-                                  <div class="text-xs">
-                                    <div class="text-red-600 line-through">
-                                      <%= truncate_cell_value(changed_column['old_value'] || changed_column[:old_value]) %>
-                                    </div>
-                                    <div class="text-green-600 font-medium">
-                                      <%= truncate_cell_value(changed_column['new_value'] || changed_column[:new_value]) %>
-                                    </div>
-                                  </div>
-                                <% elsif operation == 'INSERT' %>
-                                  <span class="text-green-600 font-medium">
-                                    <%= truncate_cell_value(value) %>
-                                  </span>
-                                <% elsif operation == 'DELETE' %>
-                                  <span class="text-red-600 line-through">
-                                    <%= truncate_cell_value(value) %>
-                                  </span>
-                                <% else %>
-                                  <span class="text-gray-700">
-                                    <%= truncate_cell_value(value) %>
-                                  </span>
-                                <% end %>
-                              </div>
-                            </td>
-                          <% end %>
-                        <% end %>
-                      </tr>
-                      
-                      <!-- Expanded Row Content -->
-                      <tr x-show="expanded" 
-                          x-collapse
-                          class="bg-gray-50 border-t border-gray-200">
-                      <td colspan="2" class="sticky left-0 bg-gray-50 z-10 border-r border-gray-200 p-3 w-40">
-                        <div class="text-xs font-medium text-gray-700 mb-2">Record Details</div>
-                        <div class="text-xs text-gray-600">
-                          Operation: <span class="badge badge-<%= operation&.downcase %>"><%= operation %></span>
-                          <% if timestamp %>
-                            <br>Time: <%= Time.parse(timestamp.to_s).strftime("%H:%M:%S.%L") rescue timestamp %>
-                          <% end %>
-                        </div>
-                      </td>
-                      <% if snapshot %>
-                        <% snapshot.each do |key, value| %>
-                          <td x-show="tableColumns['<%= table_name %>']['<%= key %>']" 
-                              class="p-3 border-r border-gray-200 align-top">
-                            <% changed_column = column_changes&.find { |c| (c['column'] || c[:column]) == key.to_s } %>
-                            <div class="text-xs font-medium text-gray-600 mb-1"><%= key.to_s.humanize %></div>
-                            <div class="max-w-md">
-                              <% if operation == 'UPDATE' && changed_column %>
-                                <div class="space-y-2">
-                                  <div class="text-red-600 bg-red-50 p-2 rounded">
-                                    <div class="text-xs font-medium mb-1">Old Value:</div>
-                                    <pre class="text-xs whitespace-pre-wrap"><%= format_cell_value(changed_column['old_value'] || changed_column[:old_value]) %></pre>
-                                  </div>
-                                  <div class="text-green-600 bg-green-50 p-2 rounded">
-                                    <div class="text-xs font-medium mb-1">New Value:</div>
-                                    <pre class="text-xs whitespace-pre-wrap"><%= format_cell_value(changed_column['new_value'] || changed_column[:new_value]) %></pre>
-                                  </div>
-                                </div>
-                              <% elsif operation == 'INSERT' %>
-                                <div class="text-green-600 bg-green-50 p-2 rounded">
-                                  <pre class="text-xs whitespace-pre-wrap"><%= format_cell_value(value) %></pre>
-                                </div>
-                              <% elsif operation == 'DELETE' %>
-                                <div class="text-red-600 bg-red-50 p-2 rounded">
-                                  <pre class="text-xs whitespace-pre-wrap"><%= format_cell_value(value) %></pre>
-                                </div>
-                              <% else %>
-                                <div class="text-gray-700 bg-gray-100 p-2 rounded">
-                                  <pre class="text-xs whitespace-pre-wrap"><%= format_cell_value(value) %></pre>
-                                </div>
-                              <% end %>
-                            </div>
-                          </td>
-                        <% end %>
-                      <% end %>
-                    </tr>
-                    </tbody>
-                  <% end %>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      <% end %>
-    </div>
-  </div>
+<!-- This view is only used for redirects now -->
+<div>
+  <p>Redirecting to changes...</p>
 </div>
-
-<script>
-function sessionView() {
-  return {
-    activeTab: 'changes',
-    showColumnSelector: null,
-    tableColumns: {},
-    
-    init() {
-      // Initialize column visibility for each table
-      <% @tables_summary.each do |table_name, summary| %>
-        this.tableColumns['<%= table_name %>'] = {};
-        <% if summary[:sample_record] %>
-          <% summary[:sample_record].keys.each do |column| %>
-            this.tableColumns['<%= table_name %>']['<%= column %>'] = true;
-          <% end %>
-        <% end %>
-      <% end %>
-    },
-    
-    scrollToTable(tableName) {
-      this.activeTab = 'changes';
-      setTimeout(() => {
-        const element = document.getElementById(`table-${tableName}`);
-        if (element) {
-          element.scrollIntoView({ behavior: 'smooth' });
-        }
-      }, 100);
-    },
-    
-    toggleColumnSelector(tableName) {
-      this.showColumnSelector = this.showColumnSelector === tableName ? null : tableName;
-    },
-    
-    selectAllColumns(tableName) {
-      Object.keys(this.tableColumns[tableName]).forEach(column => {
-        this.tableColumns[tableName][column] = true;
-      });
-    },
-    
-    selectNoneColumns(tableName) {
-      Object.keys(this.tableColumns[tableName]).forEach(column => {
-        this.tableColumns[tableName][column] = false;
-      });
-    },
-    
-    exportData() {
-      const data = [];
-      <% @tables_summary.each do |table_name, summary| %>
-        <% summary[:changes].each do |change| %>
-          data.push({
-            table: '<%= table_name %>',
-            operation: '<%= change['operation'] || change[:operation] || 'UNKNOWN' %>',
-            timestamp: '<%= change['timestamp'] || change[:timestamp] %>',
-            record_id: '<%= change['record_id'] || change[:record_id] %>',
-            changes: '<%= change['changes'].to_json if change['changes'] %>'
-          });
-        <% end %>
-      <% end %>
-      
-      const csv = [
-        ['Table', 'Operation', 'Timestamp', 'Record ID', 'Changes'],
-        ...data.map(row => [row.table, row.operation, row.timestamp, row.record_id, row.changes])
-      ].map(row => row.map(cell => `"${cell}"`).join(',')).join('\n');
-      
-      const blob = new Blob([csv], { type: 'text/csv' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `session-<%= @session.id %>-changes.csv`;
-      a.click();
-      URL.revokeObjectURL(url);
-    }
-  }
-}
-</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>