dbwatcher 1.1.1 → 1.1.3

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

@@ -0,0 +1,170 @@
+<!-- Changes Content - Hybrid Tabulator Implementation -->
+<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 - Enhanced UI Structure -->
+  <template x-if="!loading && !error && Object.keys(tableData).length > 0">
+    <div class="h-full flex flex-col bg-gray-50">
+      <!-- Filter Header -->
+      <div class="p-3 border-b border-gray-300 bg-gray-50">
+        <div class="flex items-center justify-between gap-4">
+          <h3 class="text-sm font-medium text-gray-900">Tables View</h3>
+          <div class="flex items-center gap-3 text-xs">
+            <!-- Search Filter -->
+            <input type="text" 
+                   x-model="filters.search" 
+                   @input="applyFilters()"
+                   placeholder="Search..."
+                   class="px-2 py-1 border border-gray-300 rounded text-xs w-32 focus:outline-none focus:ring-1 focus:ring-blue-medium">
+            
+            <!-- Operation Filter -->
+            <select x-model="filters.operation" 
+                    @change="applyFilters()"
+                    class="px-2 py-1 border border-gray-300 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-medium">
+              <option value="">All Operations</option>
+              <template x-for="operation in getAvailableOperations()" :key="operation">
+                <option :value="operation" x-text="operation"></option>
+              </template>
+            </select>
+            
+            <!-- Multi-Table Filter -->
+            <div class="relative" x-data="{ showTableFilter: false }">
+              <button @click="showTableFilter = !showTableFilter" 
+                      class="text-xs bg-white border border-gray-300 px-2 py-1 rounded hover:bg-gray-50 flex items-center gap-1">
+                <span x-text="filters.selectedTables.length === 0 ? 'All Tables' : `${filters.selectedTables.length} Tables`"></span>
+                <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="M19 9l-7 7-7-7"></path>
+                </svg>
+              </button>
+              
+              <div x-show="showTableFilter" 
+                   x-transition
+                   @click.away="showTableFilter = false"
+                   class="absolute top-full right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-50 min-w-48 max-h-48 overflow-auto">
+                <div class="p-2 border-b border-gray-200 flex gap-2">
+                  <button @click="selectAllTables(); showTableFilter = false"
+                          class="text-xs text-blue-medium hover:text-navy-dark underline">
+                    All
+                  </button>
+                  <button @click="clearTableFilters()"
+                          class="text-xs text-blue-medium hover:text-navy-dark underline">
+                    None
+                  </button>
+                </div>
+                <div class="p-1">
+                  <template x-for="tableName in getAvailableTables()" :key="tableName">
+                    <label class="flex items-center gap-2 p-1 rounded hover:bg-gray-100 cursor-pointer">
+                      <input type="checkbox" 
+                             :value="tableName" 
+                             x-model="filters.selectedTables" 
+                             @change="applyFilters()"
+                             class="form-checkbox h-3 w-3 text-blue-medium">
+                      <span class="text-xs text-gray-700" x-text="tableName"></span>
+                    </label>
+                  </template>
+                </div>
+              </div>
+            </div>
+            
+            <!-- Clear Filters -->
+            <button @click="clearAllFilters()" 
+                    class="text-xs bg-white border border-gray-300 px-2 py-1 rounded hover:bg-gray-50">
+              Clear
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tables Content -->
+      <div class="flex-1 overflow-auto p-2">
+        <template x-for="[tableName, tableInfo] in Object.entries(tableData)" :key="tableName">
+        <div x-show="filters.selectedTables.length === 0 || filters.selectedTables.includes(tableName)" 
+             class="mb-4 bg-white border border-gray-200 rounded shadow-sm" x-data="{ expanded: true }">
+          <!-- Table Header with Column Controls -->
+          <div class="bg-gray-100 px-3 py-2 flex items-center cursor-pointer border-b border-gray-200"
+               @click="expanded = !expanded"
+               :id="`table-${tableName}`">
+            <svg class="w-4 h-4 mr-2 transition-transform text-gray-600"
+                 :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>
+            <div class="flex-1">
+              <h3 class="text-sm font-medium text-gray-900" x-text="tableName"></h3>
+              <div class="text-xs text-gray-500 mt-1" x-show="tableInfo.model_class">
+                <span x-text="tableInfo.model_class"></span>
+              </div>
+            </div>
+            <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 changes-table-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 flex items-center">
+              <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
+              </svg>
+              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 column-selector">
+            <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>
+    </div>
+  </template>
+</div>

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

@@ -0,0 +1,260 @@
+<%# Timeline View - Simple chronological list of changes %>
+<div class="h-full"
+     x-data="DBWatcher.getComponent('timeline', { sessionId: '<%= @session.id %>' })"
+     x-init="init()">
+
+  <!-- Timeline Header -->
+  <div class="p-3 border-b border-gray-300 bg-gray-50">
+    <div class="flex items-center justify-between">
+      <h3 class="text-sm font-medium text-gray-900">Timeline View</h3>
+      <div class="flex items-center gap-3 text-xs">
+        <template x-if="!loading && filteredData.length > 0">
+          <span class="text-gray-600">
+            <span x-text="filteredData.length"></span> operations
+            <template x-if="filteredData.length !== timelineData.length">
+              <span x-text="`of ${timelineData.length} total`"></span>
+            </template>
+          </span>
+        </template>
+      </div>
+    </div>
+  </div>
+
+  <!-- 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-medium"></div>
+    <span class="ml-2 text-gray-600">Loading timeline...</span>
+  </div>
+
+  <!-- Error State -->
+  <div x-show="error" class="p-4 bg-red-50 border border-red-200 rounded m-4">
+    <p class="text-red-700" x-text="error"></p>
+    <button @click="loadTimelineData()" class="mt-2 text-red-600 hover:text-red-800 underline">Retry</button>
+  </div>
+
+  <!-- Timeline Content -->
+  <div x-show="!loading && !error" class="h-full flex">
+    <!-- Sidebar Filters -->
+    <div class="w-64 bg-gray-50 border-r border-gray-200 p-3 overflow-auto">
+      <!-- Table Filter -->
+      <div class="mb-4">
+        <h4 class="text-sm font-medium text-gray-900 mb-2">Filter by Tables</h4>
+
+        <!-- Select All / Clear All -->
+        <div class="mb-2 flex gap-2">
+          <button @click="filters.tables = getAvailableTables(); applyFilters()"
+                  class="text-xs text-blue-medium hover:text-navy-dark underline"
+                  :disabled="loading">
+            Select All
+          </button>
+          <button @click="clearFilters()"
+                  class="text-xs text-blue-medium hover:text-navy-dark underline"
+                  :disabled="loading">
+            Clear All
+          </button>
+        </div>
+
+        <!-- Search tables -->
+        <input type="text"
+               x-model="tableSearch"
+               placeholder="Search tables..."
+               class="w-full px-2 py-1 mb-2 border border-gray-300 rounded text-xs">
+
+        <!-- Tables list with max height and scrolling -->
+        <div class="max-h-32 overflow-y-auto space-y-1 border border-gray-200 rounded p-2 bg-white">
+          <template x-for="table in getAvailableTables().filter(t => !tableSearch || t.toLowerCase().includes(tableSearch.toLowerCase()))" :key="table">
+            <label class="flex items-center gap-2 p-1 rounded hover:bg-gray-100 cursor-pointer">
+              <input type="checkbox"
+                     :value="table"
+                     x-model="filters.tables"
+                     @change="applyFilters()"
+                     class="form-checkbox h-3 w-3 text-blue-medium">
+              <span class="text-xs text-gray-700" x-text="table"></span>
+            </label>
+          </template>
+        </div>
+
+        <!-- Selected count -->
+        <div class="mt-2 text-xs text-gray-500" x-show="filters.tables.length > 0">
+          <span x-text="filters.tables.length"></span> table(s) selected
+        </div>
+      </div>
+
+      <!-- Search -->
+      <div class="mb-4">
+        <h4 class="text-sm font-medium text-gray-900 mb-2">Search</h4>
+        <input type="text"
+               x-model="filters.searchText"
+               @input="applyFilters()"
+               placeholder="Table, operation, or record ID"
+               class="w-full px-2 py-1 border border-gray-300 rounded text-sm">
+      </div>
+
+      <!-- Analytics Summary -->
+      <template x-if="!loading && timelineData.length > 0">
+        <div class="bg-white border border-gray-200 rounded p-3">
+          <h4 class="text-sm font-medium text-gray-900 mb-3">Session Analytics</h4>
+          <div class="space-y-2 text-xs">
+            <div class="flex justify-between">
+              <span class="text-gray-600">Operations:</span>
+              <span class="font-medium" x-text="`${filteredData.length}/${timelineData.length}`"></span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-gray-600">Tables:</span>
+              <span class="font-medium" x-text="getAvailableTables().length"></span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-gray-600">Duration:</span>
+              <span class="font-medium" x-text="metadata.session_duration || 'N/A'"></span>
+            </div>
+
+            <!-- Operation Counts -->
+            <div class="mt-3 space-y-1">
+              <template x-for="[operation, count] in Object.entries(metadata.operation_counts || {})" :key="operation">
+                <div class="flex justify-between items-center">
+                  <span class="badge badge-sm" :class="`badge-${operation.toLowerCase()}`" x-text="operation"></span>
+                  <span class="text-xs font-medium" x-text="count"></span>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- Main Timeline Content -->
+    <div class="flex-1 overflow-auto">
+      <!-- Empty State -->
+      <div x-show="filteredData.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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+        <p class="mt-2 text-gray-500">No operations found for the current filters</p>
+        <button @click="clearFilters()" class="mt-2 text-blue-medium hover:text-navy-dark underline">Clear filters</button>
+      </div>
+
+      <!-- Operations List -->
+      <template x-if="filteredData.length > 0">
+        <div class="divide-y divide-gray-200">
+          <template x-for="operation in filteredData" :key="operation.id">
+            <div class="transition-colors" x-data="{ expanded: false }">
+              <!-- Main Operation Row (Clickable) -->
+              <div class="p-4 hover:bg-gray-50 cursor-pointer" @click="expanded = !expanded">
+                <div class="flex items-start justify-between">
+                  <!-- Operation Info -->
+                  <div class="flex items-start gap-3 flex-1">
+                    <div class="flex-1 min-w-0">
+                      <div class="flex items-center gap-2 mb-1 flex-wrap">
+                        <span class="badge badge-sm flex-shrink-0" :class="`badge-${operation.operation.toLowerCase()}`" x-text="operation.operation"></span>
+                        <span class="text-sm font-medium text-gray-900 truncate" x-text="operation.table_name"></span>
+                        <span x-show="operation.record_id" class="text-xs text-gray-500 flex-shrink-0">
+                          ID: <span x-text="operation.record_id"></span>
+                        </span>
+                      </div>
+                      <div class="text-xs text-gray-500">
+                        <span x-text="formatTimestamp(operation.timestamp)"></span>
+                        <span class="ml-2">•</span>
+                        <span class="ml-2" x-text="formatRelativeTime(operation)"></span>
+                      </div>
+
+                      <!-- Changes Preview (if any) -->
+                      <template x-if="operation.changes && Object.keys(operation.changes).length > 0 && !expanded">
+                        <div class="mt-2 text-xs">
+                          <span class="text-gray-400">Changes:</span>
+                          <span class="text-gray-600" x-text="Object.keys(operation.changes).slice(0, 3).join(', ') + (Object.keys(operation.changes).length > 3 ? '...' : '')"></span>
+                        </div>
+                      </template>
+                    </div>
+                  </div>
+
+                  <!-- Expand/Collapse Icon and Sequence -->
+                  <div class="flex items-center gap-2 ml-4 flex-shrink-0">
+                    <div class="text-xs text-gray-400">
+                      #<span x-text="operation.sequence + 1"></span>
+                    </div>
+                    <svg class="w-4 h-4 text-gray-400 transition-transform" :class="{ 'rotate-180': expanded }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Expanded Details -->
+              <div x-show="expanded" x-collapse class="bg-gray-50 border-t border-gray-200">
+                <div class="p-4 pl-10">
+                  <!-- Operation Details -->
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm mb-4">
+                    <div>
+                      <span class="font-medium text-gray-700">Table:</span>
+                      <span class="ml-2 text-gray-900" x-text="operation.table_name"></span>
+                    </div>
+                    <div>
+                      <span class="font-medium text-gray-700">Operation:</span>
+                      <span class="ml-2 badge badge-sm" :class="`badge-${operation.operation.toLowerCase()}`" x-text="operation.operation"></span>
+                    </div>
+                    <div x-show="operation.record_id">
+                      <span class="font-medium text-gray-700">Record ID:</span>
+                      <span class="ml-2 text-gray-900" x-text="operation.record_id"></span>
+                    </div>
+                    <div>
+                      <span class="font-medium text-gray-700">Timestamp:</span>
+                      <span class="ml-2 text-gray-900" x-text="formatTimestamp(operation.timestamp)"></span>
+                    </div>
+                    <div>
+                      <span class="font-medium text-gray-700">Relative Time:</span>
+                      <span class="ml-2 text-gray-900" x-text="formatRelativeTime(operation)"></span>
+                    </div>
+                    <div>
+                      <span class="font-medium text-gray-700">Sequence:</span>
+                      <span class="ml-2 text-gray-900" x-text="operation.sequence + 1"></span>
+                    </div>
+                  </div>
+
+                  <!-- Changes Details -->
+                  <template x-if="operation.changes && Object.keys(operation.changes).length > 0">
+                    <div class="mt-4">
+                      <h5 class="font-medium text-gray-700 mb-2">Changes:</h5>
+                      <div class="bg-white border border-gray-200 rounded p-3 text-xs overflow-auto max-h-32">
+                        <template x-for="[field, change] in Object.entries(operation.changes)" :key="field">
+                          <div class="mb-2 last:mb-0">
+                            <span class="font-medium text-gray-700" x-text="field"></span>:
+                            <template x-if="change.from !== undefined">
+                              <span>
+                                <span class="text-red-600" x-text="change.from"></span>
+                                →
+                                <span class="text-green-600" x-text="change.to"></span>
+                              </span>
+                            </template>
+                            <template x-if="change.from === undefined">
+                              <span class="text-green-600" x-text="change.to || change"></span>
+                            </template>
+                          </div>
+                        </template>
+                      </div>
+                    </div>
+                  </template>
+
+                  <!-- Metadata -->
+                  <template x-if="operation.metadata && Object.keys(operation.metadata).length > 0">
+                    <div class="mt-4">
+                      <h5 class="font-medium text-gray-700 mb-2">Metadata:</h5>
+                      <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
+                        <template x-for="[key, value] in Object.entries(operation.metadata).filter(([k, v]) => v !== null && v !== undefined)" :key="key">
+                          <div>
+                            <span class="font-medium text-gray-600 capitalize" x-text="key.replace('_', ' ')"></span>:
+                            <span class="ml-1 text-gray-900" x-text="value"></span>
+                          </div>
+                        </template>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </template>
+    </div>
+  </div>
+
+</div>

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

@@ -1,31 +1,30 @@
 <%# Sessions Index Page %>
-<div class="h-full flex flex-col">
+<div class="h-full flex flex-col" x-data="{
+  filterText: '',
+  filterSessions(session, filterText) {
+    if (!filterText) return true;
+    const searchText = filterText.toLowerCase();
+    const sessionId = session.querySelector('td:first-child').textContent.toLowerCase();
+    const sessionName = session.querySelector('td:nth-child(2)').textContent.toLowerCase();
+    return sessionId.includes(searchText) || sessionName.includes(searchText);
+  }
+}">
   <%= 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 }
+    { name: 'All Sessions', active: true }
   ] %>
 
   <!-- 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>
+           class="compact-input flex-1 max-w-xs"
+           x-model="filterText"
+           @input="document.querySelectorAll('.session-row').forEach(row => {
+             row.classList.toggle('hidden', !filterSessions(row, filterText));
+           })">
 
     <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",
@@ -56,79 +55,100 @@
       </div>
     </div>
   <% else %>
-    <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| %>
-          <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>
-                <% end %>
-              </div>
-            </td>
+    <div class="bg-white border border-gray-300 rounded shadow-sm">
+      <table class="compact-table sessions-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" style="width:100px">Status</th>
+            <th class="text-center" style="width:100px">Changes</th>
+            <th class="text-right" style="width:120px">Started</th>
+            <th class="text-right" style="width:120px">Duration</th>
+            <th class="text-center" style="width:80px">Actions</th>
           </tr>
-        <% end %>
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          <% @sessions.each do |session| %>
+            <tr class="session-row">
+              <td style="min-width:180px; max-width:260px; width:18%">
+                <span class="font-mono text-xs">
+                  <%= 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 font-medium">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 actions-cell">
+                <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",
+                      title: "View session details" 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>
+                  <% end %>
+                </div>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- No Results Message -->
+    <div
+      x-show="filterText && document.querySelectorAll('.session-row:not(.hidden)').length === 0"
+      x-cloak
+      class="mt-4 text-center py-8 bg-gray-50 border border-gray-200 rounded">
+      <p class="text-gray-500">No sessions match your filter criteria</p>
+      <button
+        @click="filterText = ''"
+        class="mt-2 text-blue-medium hover:text-blue-700 text-sm">
+        Clear filter
+      </button>
+    </div>
   <% 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 class="h-6 bg-gray-100 border-t border-gray-300 flex items-center px-4 text-xs text-gray-600 mt-4">
+    <span x-show="!filterText"><%= @sessions.count %> sessions total •
+    <%= @sessions.count { |s| session_active?(s) } %> active</span>
+    <span x-show="filterText" x-text="`${document.querySelectorAll('.session-row:not(.hidden)').length} of ${<%= @sessions.count %>} sessions shown`"></span>
+    <span class="ml-auto">Last updated: <%= Time.current.strftime("%H:%M:%S") %></span>
   </div>
 </div>
+
+<style>
+  [x-cloak] { display: none !important; }
+</style>