dbwatcher 1.0.0 → 1.1.0

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

@@ -0,0 +1,265 @@
+<!-- Changes Content - Hybrid Tabulator Implementation with Original UI Structure -->
+<div class="h-full"
+     x-data="changesTableHybrid({ sessionId: '<%= @session.id %>' })">
+
+  <!-- Loading State -->
+  <div x-show="loading" class="flex items-center justify-center h-64">
+    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+    <span class="ml-2 text-gray-600">Loading changes...</span>
+  </div>
+
+  <!-- Error State -->
+  <div x-show="error" class="p-4 bg-red-50 border border-red-200 rounded">
+    <p class="text-red-700" x-text="error"></p>
+    <button @click="loadChangesData()" class="mt-2 text-red-600 underline">Retry</button>
+  </div>
+
+  <!-- No Data State -->
+  <div x-show="!loading && !error && Object.keys(tableData).length === 0"
+       class="flex flex-col items-center justify-center h-64">
+    <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+    </svg>
+    <p class="mt-2 text-gray-500">No changes data available</p>
+  </div>
+
+  <!-- Multiple Tables - Original UI Structure -->
+  <template x-if="!loading && !error && Object.keys(tableData).length > 0">
+    <div class="h-full overflow-auto">
+      <template x-for="[tableName, tableInfo] in Object.entries(tableData)" :key="tableName">
+        <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-${tableName}`">
+            <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" x-text="tableName"></h3>
+            <div class="flex gap-2 mr-4">
+              <template x-for="[op, count] in Object.entries(tableInfo.operations || {})" :key="op">
+                <span x-show="count > 0" class="badge" :class="`badge-${op.toLowerCase()}`" x-text="count"></span>
+              </template>
+            </div>
+
+            <!-- Column Visibility Button -->
+            <button @click.stop="toggleColumnSelector(tableName)"
+                    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 === tableName"
+               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">
+              <template x-for="column in tableInfo.columns" :key="column">
+                <label class="flex items-center text-xs hover:bg-gray-50 p-1 rounded">
+                  <input type="checkbox"
+                         :checked="isColumnVisible(tableName, column)"
+                         @change="toggleColumnVisibility(tableName, column)"
+                         class="mr-2">
+                  <span class="flex-1" x-text="column"></span>
+                </label>
+              </template>
+            </div>
+            <div class="mt-2 pt-2 border-t border-gray-200 flex gap-1">
+              <button @click="selectAllColumns(tableName)"
+                      class="text-xs bg-blue-600 text-white px-2 py-1 rounded hover:bg-blue-700">All</button>
+              <button @click="selectNoneColumns(tableName)"
+                      class="text-xs bg-gray-600 text-white px-2 py-1 rounded hover:bg-gray-700">None</button>
+            </div>
+          </div>
+
+          <!-- Tabulator Container for This Table -->
+          <div x-show="expanded" x-collapse>
+            <div :id="`changes-table-${tableName}`" class="table-container"></div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </template>
+</div>
+
+<!-- Custom Tabulator Styles -->
+<style>
+  /* Override Tabulator styles to match current design */
+  .tabulator {
+    font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace !important;
+    font-size: 12px !important;
+    border: none;
+    background: white;
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  .tabulator .tabulator-header {
+    background: #f3f3f3 !important;
+    border-bottom: 2px solid #e8e8e8 !important;
+    font-size: 11px !important;
+  }
+
+  .tabulator .tabulator-header .tabulator-col {
+    background: #f3f3f3 !important;
+    border-right: 1px solid #e8e8e8 !important;
+    padding: 4px 8px !important;
+    font-weight: 500 !important;
+    text-transform: none !important;
+    height: 32px !important;
+    text-align: left;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+
+  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
+    background: white !important;
+    border-bottom: 1px solid #f0f0f0 !important;
+    min-height: auto;
+  }
+
+  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
+    background: #f3f4f6 !important;
+  }
+
+  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
+    border-right: 1px solid #f0f0f0 !important;
+    padding: 2px 8px !important;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: top;
+    font-size: 12px !important;
+    height: auto;
+    min-height: 28px;
+  }
+
+  /* Override for UPDATE operation cells to allow multi-line */
+  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell:has(.space-y-1) {
+    white-space: normal;
+    height: auto;
+    padding: 4px 8px !important;
+  }
+
+  /* Maintain sticky columns exactly as current */
+  .tabulator .tabulator-header .tabulator-col.sticky-left-0 {
+    position: sticky !important;
+    left: 0 !important;
+    z-index: 20 !important;
+    background: #f3f3f3 !important;
+    box-shadow: 2px 0 4px rgba(0,0,0,0.1) !important;
+  }
+
+  .tabulator .tabulator-header .tabulator-col.sticky-left-1 {
+    position: sticky !important;
+    left: 60px !important;
+    z-index: 19 !important;
+    background: #f3f3f3 !important;
+    box-shadow: 2px 0 4px rgba(0,0,0,0.1) !important;
+  }
+
+  .tabulator .tabulator-header .tabulator-col.sticky-left-2 {
+    position: sticky !important;
+    left: 108px !important;
+    z-index: 18 !important;
+    background: #f3f3f3 !important;
+    box-shadow: 2px 0 4px rgba(0,0,0,0.1) !important;
+  }
+
+  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.sticky-left-0 {
+    position: sticky !important;
+    left: 0 !important;
+    background: white !important;
+    z-index: 5 !important;
+    box-shadow: 2px 0 4px rgba(0,0,0,0.05) !important;
+  }
+
+  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.sticky-left-1 {
+    position: sticky !important;
+    left: 60px !important;
+    background: white !important;
+    z-index: 4 !important;
+    box-shadow: 2px 0 4px rgba(0,0,0,0.05) !important;
+  }
+
+  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.sticky-left-2 {
+    position: sticky !important;
+    left: 108px !important;
+    background: white !important;
+    z-index: 3 !important;
+    box-shadow: 2px 0 4px rgba(0,0,0,0.05) !important;
+  }
+
+  .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 !important;
+  }
+
+  /* Operation badges */
+  .badge-insert { background: #10b981; color: white; }
+  .badge-update { background: #6CADDF; color: white; }
+  .badge-delete { background: #ef4444; color: white; }
+  .badge-select { background: #6b7280; color: white; }
+
+  .badge {
+    padding: 1px 6px;
+    font-size: 10px;
+    border-radius: 3px;
+    font-weight: 500;
+    text-transform: uppercase;
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+    text-align: center;
+  }
+
+  /* Row detail styling */
+  .row-detail {
+    border-top: 1px solid #e5e7eb;
+    background: #f9fafb;
+    padding: 0;
+  }
+
+  .row-detail td {
+    padding: 8px !important;
+    vertical-align: top !important;
+    border-right: 1px solid #e5e7eb !important;
+  }
+
+  .row-detail h4 {
+    font-weight: 600;
+    color: #374151;
+    margin-bottom: 8px;
+  }
+
+  /* Maintain sticky positioning in expanded rows - combined first 3 columns */
+  .row-detail .sticky-left-0 {
+    position: sticky !important;
+    left: 0 !important;
+    z-index: 5 !important;  /* Lower z-index to prevent overlay issues */
+    background: #f9fafb !important;  /* Match row-detail background */
+    box-shadow: 2px 0 4px rgba(0,0,0,0.1) !important;
+    width: 268px !important;
+    min-width: 268px !important;
+  }
+
+  /* Expand button styling */
+  .expand-btn {
+    padding: 2px;
+    border-radius: 2px;
+    transition: all 0.15s ease;
+  }
+
+  .expand-btn:hover {
+    background-color: #f3f4f6;
+  }
+</style>

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

@@ -0,0 +1,166 @@
+<!-- Diagrams Content - API-First Implementation -->
+<div class="h-full"
+     x-data="diagrams({ sessionId: '<%= @session.id %>' })"
+     x-init="init()">
+  <!-- Diagram Controls - consistent with other tabs -->
+  <div class="p-3 border-b border-gray-300 bg-gray-100">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2">
+          <label class="text-xs font-medium text-gray-700">Diagram Type:</label>
+          <select
+            x-model="selectedType"
+            @change="loadDiagram()"
+            class="compact-select text-xs border border-gray-300 rounded px-2 py-1 bg-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+          >
+            <template x-for="[type, metadata] in Object.entries(diagramTypes)" :key="type">
+              <option :value="type" x-text="metadata.display_name"></option>
+            </template>
+          </select>
+        </div>
+
+        <button
+          @click="loadDiagram()"
+          :disabled="loading"
+          class="<%= diagram_button_classes(:primary) %>"
+        >
+          <span x-show="!loading">Generate</span>
+          <span x-show="loading">Generating...</span>
+        </button>
+      </div>
+
+      <!-- Right-aligned controls -->
+      <div class="flex items-center gap-1">
+        <button
+          x-show="diagramContent && !loading"
+          @click="toggleCodeView()"
+          class="<%= diagram_button_classes(:secondary) %>"
+        >
+          <span x-show="!showCodeView">View Code</span>
+          <span x-show="showCodeView">Hide Code</span>
+        </button>
+        <button
+          x-show="diagramContent && !loading"
+          @click="downloadSVG()"
+          class="<%= diagram_button_classes(:primary) %>"
+        >
+          Download
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Diagram Content Area -->
+  <div class="flex-1 overflow-hidden relative mx-1 mb-1 mt-2 rounded-lg" style="min-height: 600px; height: calc(100vh - 150px);">
+    <!-- Loading Types State (Initial) -->
+    <div
+      x-show="loading && Object.keys(diagramTypes).length === 0"
+      class="absolute inset-0 flex flex-col items-center justify-center bg-white bg-opacity-75 rounded-md border border-gray-200"
+      style="z-index: 10;"
+    >
+      <div class="flex flex-col items-center">
+        <div class="w-6 h-6 border-3 border-blue-600 border-t-transparent rounded-full animate-spin mb-2"></div>
+        <div class="text-xs text-gray-600">Loading diagram types...</div>
+      </div>
+    </div>
+
+    <!-- Error State -->
+    <div
+      x-show="error"
+      class="absolute inset-0 flex flex-col items-center justify-center p-4 bg-red-50 border border-red-200 rounded-md"
+      style="z-index: 10;"
+    >
+      <svg class="w-10 h-10 mb-3 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+      </svg>
+      <p class="text-sm font-medium mb-1 text-red-700" x-text="error"></p>
+      <button @click="loadDiagramTypes().then(() => loadDiagram())" class="mt-2 text-red-600 underline">Retry</button>
+    </div>
+
+    <!-- Empty State -->
+    <div
+      x-show="!diagramContent && !loading && !generating && !error && Object.keys(diagramTypes).length > 0"
+      class="absolute inset-0 flex flex-col items-center justify-center text-gray-500 p-6 border border-gray-200 rounded-md bg-gray-50"
+    >
+      <svg class="w-10 h-10 mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+      </svg>
+      <p class="text-sm font-medium mb-1">Database Diagram</p>
+      <p class="text-xs text-center text-gray-400">Select a diagram type and click Generate to visualize your database structure</p>
+    </div>
+
+    <!-- Generating Diagram State -->
+    <div
+      x-show="generating"
+      class="absolute inset-0 flex flex-col items-center justify-center bg-white bg-opacity-75 rounded-md border border-gray-200"
+      style="z-index: 10;"
+    >
+      <div class="flex flex-col items-center">
+        <div class="w-6 h-6 border-3 border-blue-600 border-t-transparent rounded-full animate-spin mb-2"></div>
+        <div class="text-xs text-gray-600">Generating diagram...</div>
+      </div>
+    </div>
+
+    <!-- Rendered Diagram -->
+    <div
+      x-ref="diagramContainer"
+      x-show="diagramContent && !loading && !error && !showCodeView"
+      class="absolute inset-0 p-4 overflow-hidden bg-white border border-gray-200 rounded-md shadow-inner"
+      style="display: flex; flex-direction: column;"
+    >
+      <!-- Mermaid diagram will be rendered here -->
+      <div class="flex-1 bg-gray-50 rounded-md p-2" style="min-height: 400px;">
+        <!-- This div will contain the actual diagram -->
+      </div>
+    </div>
+
+    <!-- Code View -->
+    <div
+      x-show="diagramContent && !loading && !error && showCodeView"
+      class="absolute inset-0 p-4 overflow-hidden bg-white border border-gray-200 rounded-md shadow-inner"
+      style="display: flex; flex-direction: column;"
+    >
+      <div class="flex justify-between items-center mb-2">
+        <h3 class="text-sm font-medium text-gray-700">Mermaid Diagram Code</h3>
+        <button
+          x-ref="copyButton"
+          @click="copyDiagramCode()"
+          class="<%= diagram_button_classes(:primary) %>"
+        >
+          Copy Code
+        </button>
+      </div>
+      <div class="flex-1 bg-gray-50 rounded-md overflow-auto diagram-code-view" style="min-height: 400px;">
+        <div class="relative h-full">
+          <pre x-ref="codeContainer" class="text-xs font-mono p-4 whitespace-pre-wrap overflow-x-auto h-full" style="max-height: calc(100vh - 220px); overflow-y: auto;" x-text="diagramContent"></pre>
+          <div class="absolute top-0 right-2 bg-gray-200 text-xs text-gray-500 px-1 py-0.5 rounded-b opacity-70">
+            Mermaid Syntax
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Error State -->
+    <div
+      x-show="error"
+      class="absolute inset-0 flex items-center justify-center p-6 border border-gray-200 rounded-md bg-gray-50"
+    >
+      <div class="max-w-md w-full text-center">
+        <div class="bg-red-50 border border-red-200 rounded p-4">
+          <svg class="w-10 h-10 text-red-400 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
+          </svg>
+          <h3 class="text-sm font-medium text-red-800 mb-2">Error Generating Diagram</h3>
+          <p class="text-xs text-red-600 mb-3" x-text="error"></p>
+          <button
+            @click="error = null; loadDiagram()"
+            class="<%= diagram_button_classes(:primary) %>"
+          >
+            Try Again
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,11 @@
+<!-- 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 whitespace-nowrap">
+    <%= Time.parse(session.started_at.to_s).strftime("%Y-%m-%d %H:%M:%S") rescue session.started_at %> -
+    <%= Time.parse(session.ended_at.to_s).strftime("%Y-%m-%d %H:%M:%S") rescue session.ended_at %>
+  </span>
+</div>

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

@@ -0,0 +1,88 @@
+<!-- Summary Content - API-First Implementation -->
+<div class="h-full"
+     x-data="summary({ sessionId: '<%= @session.id %>' })">
+
+  <!-- Loading State -->
+  <div x-show="loading" class="flex items-center justify-center h-64">
+    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-500"></div>
+    <span class="ml-2 text-gray-600">Loading summary...</span>
+  </div>
+
+  <!-- Error State -->
+  <div x-show="error" class="p-4 bg-red-50 border border-red-200 rounded">
+    <p class="text-red-700" x-text="error"></p>
+    <button @click="loadSummaryData()" class="mt-2 text-red-600 underline">Retry</button>
+  </div>
+
+  <!-- Content when data is loaded -->
+  <template x-if="!loading && !error">
+    <div class="h-full overflow-auto">
+      <!-- Session Overview -->
+      <div class="border-b border-gray-300">
+        <div class="bg-gray-100 px-3 py-2 border-b border-gray-300">
+          <h3 class="text-sm font-medium text-gray-900">Session Overview</h3>
+        </div>
+        <div class="bg-white p-3">
+          <div class="grid grid-cols-4 gap-4 text-xs">
+            <div>
+              <div class="text-gray-500 font-medium mb-1">Started At</div>
+              <div class="text-gray-900 font-mono" x-text="formatStartTime()"></div>
+            </div>
+            <div>
+              <div class="text-gray-500 font-medium mb-1">End Time</div>
+              <div class="text-gray-900 font-mono" x-text="formatEndTime()"></div>
+            </div>
+            <div>
+              <div class="text-gray-500 font-medium mb-1">Duration</div>
+              <div class="text-gray-900 font-mono" x-text="formatDuration()"></div>
+            </div>
+            <div>
+              <div class="text-gray-500 font-medium mb-1">Status</div>
+              <div class="flex items-center">
+                <div class="h-2 w-2 rounded-full mr-2"
+                     :class="formatEndTime() === 'Active' ? 'bg-green-500 animate-pulse' : 'bg-gray-500'"></div>
+                <span class="text-gray-900 font-medium text-xs"
+                      x-text="formatEndTime() === 'Active' ? 'Active' : 'Completed'"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      <!-- Tables Grid -->
+      <div x-show="summaryData.tables_breakdown && summaryData.tables_breakdown.length > 0" class="border-b border-gray-300">
+        <div class="bg-gray-100 px-3 py-2 border-b border-gray-300">
+          <h3 class="text-sm font-medium text-gray-900">Table Activity Details</h3>
+        </div>
+        <div class="bg-white p-3">
+          <div class="grid grid-cols-4 gap-3">
+            <template x-for="table in summaryData.tables_breakdown" :key="table.table_name">
+              <div class="bg-gray-50 border border-gray-200 p-2 hover:bg-gray-100 cursor-pointer transition-colors"
+                   @click="window.location.href=`/dbwatcher/sessions/${summaryData.session_id}/changes?table=${table.table_name}`">
+                <h4 class="text-xs font-medium text-gray-800 mb-2 truncate" x-text="table.table_name"></h4>
+                <div class="space-y-1">
+                  <template x-for="(count, op) in table.operations" :key="op">
+                    <div class="flex justify-between items-center" x-show="count > 0">
+                      <span class="badge" :class="`badge-${op.toLowerCase()}`" x-text="op.charAt(0)"></span>
+                      <span class="text-xs font-medium text-gray-900" x-text="count"></span>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <!-- Empty State -->
+      <div x-show="!summaryData.tables_breakdown || summaryData.tables_breakdown.length === 0" class="bg-white p-8 text-center">
+        <svg class="w-8 h-8 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+        </svg>
+        <p class="text-sm font-medium text-gray-500">No Database Changes</p>
+        <p class="text-xs text-gray-400">This session contains no tracked database operations.</p>
+      </div>
+    </div>
+  </template>
+</div>

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

@@ -0,0 +1,12 @@
+<!-- Tab Bar -->
+<div class="tab-bar">
+  <div class="tab-item"
+       :class="{ active: activeTab === 'changes' }"
+       @click="setActiveTab('changes')">Changes</div>
+  <div class="tab-item"
+       :class="{ active: activeTab === 'summary' }"
+       @click="setActiveTab('summary')">Summary</div>
+  <div class="tab-item"
+       :class="{ active: activeTab === 'diagrams' }"
+       @click="setActiveTab('diagrams')">Diagrams</div>
+</div>

data/app/views/dbwatcher/sessions/changes.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 active" 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" do %>
+      Diagrams
+    <% end %>
+  </div>
+
+  <!-- Changes Content -->
+  <div class="flex-1 overflow-auto">
+    <%= render partial: 'changes_tab', locals: { tables_summary: @tables_summary } %>
+  </div>
+</div>

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

@@ -0,0 +1,44 @@
+<div class="flex flex-wrap items-center gap-4">
+  <div class="flex items-center gap-2">
+    <label for="table-filter" class="text-sm font-medium text-gray-700">Table:</label>
+    <select id="table-filter"
+            x-model="filters.table"
+            @change="applyFilters()"
+            class="compact-select">
+      <option value="">All Tables</option>
+      <% if defined?(tables_summary) && tables_summary %>
+        <% tables_summary.keys.each do |table_name| %>
+          <option value="<%= table_name %>" <%= 'selected' if filters && filters[:table] == table_name %>><%= table_name %></option>
+        <% end %>
+      <% end %>
+    </select>
+  </div>
+
+  <div class="flex items-center gap-2">
+    <label for="operation-filter" class="text-sm font-medium text-gray-700">Operation:</label>
+    <select id="operation-filter"
+            x-model="filters.operation"
+            @change="applyFilters()"
+            class="compact-select">
+      <option value="">All Operations</option>
+      <option value="INSERT" <%= 'selected' if filters && filters[:operation] == 'INSERT' %>>INSERT</option>
+      <option value="UPDATE" <%= 'selected' if filters && filters[:operation] == 'UPDATE' %>>UPDATE</option>
+      <option value="DELETE" <%= 'selected' if filters && filters[:operation] == 'DELETE' %>>DELETE</option>
+    </select>
+  </div>
+
+  <div class="flex items-center gap-2">
+    <button @click="clearFilters()"
+            class="text-sm text-gray-500 hover:text-gray-700 underline">
+      Clear Filters
+    </button>
+  </div>
+
+  <div class="ml-auto flex items-center gap-2" x-show="loading">
+    <svg class="animate-spin h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+    <span class="text-sm text-gray-500">Loading...</span>
+  </div>
+</div>