dbwatcher 0.1.5 → 1.1.0

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

@@ -0,0 +1,55 @@
+/**
+ * Navigation Styles
+ * Sidebar, tabs, and navigation controls
+ */
+
+/* Sidebar styles */
+.sidebar-item {
+  font-size: 13px;
+  padding: 6px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 3px;
+  transition: all 0.15s;
+}
+
+.sidebar-item:hover {
+  background: rgba(108, 173, 223, 0.1);
+  color: var(--blue-medium);
+}
+
+.sidebar-item.active {
+  background: var(--navy-dark);
+  color: white;
+}
+
+/* Tab styles */
+.tab-bar {
+  background: var(--gray-100);
+  border-bottom: 1px solid var(--border-medium);
+  display: flex;
+  align-items: center;
+  height: 32px;
+  font-size: 12px;
+}
+
+.tab-item {
+  padding: 0 16px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  border-right: 1px solid var(--border-medium);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.tab-item:hover {
+  background: var(--border-medium);
+}
+
+.tab-item.active {
+  background: white;
+  color: var(--navy-dark);
+  font-weight: 500;
+}

data/app/assets/stylesheets/dbwatcher/core/_base.scss

@@ -0,0 +1,34 @@
+/**
+ * Base Styles
+ * Scrollbars, splitters, and utility styles
+ */
+
+/* Splitter */
+.splitter {
+  width: 4px;
+  background: var(--border-medium);
+  cursor: col-resize;
+}
+
+.splitter:hover {
+  background: var(--blue-medium);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--gray-100);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--gray-400);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--blue-medium);
+}

data/app/assets/stylesheets/dbwatcher/core/_variables.scss

@@ -0,0 +1,47 @@
+/**
+ * DBWatcher CSS Variables
+ * Core color scheme and layout dimensions
+ */
+
+:root {
+  /* Brand colors */
+  --navy-dark: #00285D;
+  --blue-light: #96C1E7;
+  --blue-medium: #6CADDF;
+  --gold-dark: #D4A11E;
+  --gold-light: #FFC758;
+
+  /* Layout dimensions for diagram container */
+  --header-height: 64px;
+  --tab-bar-height: 32px;
+  --toolbar-height: 56px;
+  --footer-height: 0px;
+
+  /* Gray scale */
+  --gray-50: #f9fafb;
+  --gray-100: #f3f3f3;
+  --gray-200: #e8e8e8;
+  --gray-300: #d1d5db;
+  --gray-400: #c8c8c8;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+
+  /* Border colors */
+  --border-light: #f0f0f0;
+  --border-medium: #e8e8e8;
+  --border-dark: #d1d5db;
+
+  /* Status colors */
+  --status-insert: #10b981;
+  --status-update: #6CADDF;
+  --status-delete: #ef4444;
+  --status-select: #6b7280;
+
+  /* Highlight colors */
+  --highlight-change: rgba(255, 199, 88, 0.3);
+  --highlight-new: rgba(16, 185, 129, 0.2);
+  --highlight-deleted: rgba(239, 68, 68, 0.2);
+}

data/app/assets/stylesheets/dbwatcher/vendor/tabulator.min.css

@@ -0,0 +1,2 @@
+.tabulator{background-color:#888;border:1px solid #999;font-size:14px;overflow:hidden;position:relative;text-align:left;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.tabulator[tabulator-layout=fitDataFill] .tabulator-tableholder .tabulator-table{min-width:100%}.tabulator[tabulator-layout=fitDataTable]{display:inline-block}.tabulator.tabulator-block-select,.tabulator.tabulator-ranges .tabulator-cell:not(.tabulator-editing){user-select:none}.tabulator .tabulator-header{background-color:#e6e6e6;border-bottom:1px solid #999;box-sizing:border-box;color:#555;font-weight:700;outline:none;overflow:hidden;position:relative;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap;width:100%}.tabulator .tabulator-header.tabulator-header-hidden{display:none}.tabulator .tabulator-header .tabulator-header-contents{overflow:hidden;position:relative}.tabulator .tabulator-header .tabulator-header-contents .tabulator-headers{display:inline-block}.tabulator .tabulator-header .tabulator-col{background:#e6e6e6;border-right:1px solid #aaa;box-sizing:border-box;display:inline-flex;flex-direction:column;justify-content:flex-start;overflow:hidden;position:relative;text-align:left;vertical-align:bottom}.tabulator .tabulator-header .tabulator-col.tabulator-moving{background:#cdcdcd;border:1px solid #999;pointer-events:none;position:absolute}.tabulator .tabulator-header .tabulator-col.tabulator-range-highlight{background-color:#d6d6d6;color:#000}.tabulator .tabulator-header .tabulator-col.tabulator-range-selected{background-color:#3876ca;color:#fff}.tabulator .tabulator-header .tabulator-col .tabulator-col-content{box-sizing:border-box;padding:4px;position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button{padding:0 8px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button:hover{cursor:pointer;opacity:.6}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder{position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title.tabulator-col-title-wrap{text-overflow:clip;white-space:normal}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor{background:#fff;border:1px solid #999;box-sizing:border-box;padding:1px;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-header-popup-button+.tabulator-title-editor{width:calc(100% - 22px)}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{align-items:center;bottom:0;display:flex;position:absolute;right:4px;top:0}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #bbb;border-left:6px solid transparent;border-right:6px solid transparent;height:0;width:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{border-top:1px solid #aaa;display:flex;margin-right:-1px;overflow:hidden;position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter{box-sizing:border-box;margin-top:2px;position:relative;text-align:center;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea{height:auto!important}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg{margin-top:3px}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input::-ms-clear{height:0;width:0}.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-right:25px}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{background-color:#cdcdcd;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter{color:#bbb}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-bottom:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #bbb;border-top:none}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter{color:#666}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-bottom:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #666;border-top:none}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter{color:#666}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-top:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:none;border-top:6px solid #666;color:#666}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical .tabulator-col-content .tabulator-col-title{align-items:center;display:flex;justify-content:center;text-orientation:mixed;writing-mode:vertical-rl}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-col-vertical-flip .tabulator-col-title{transform:rotate(180deg)}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-title{padding-right:0;padding-top:20px}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable.tabulator-col-vertical-flip .tabulator-col-title{padding-bottom:20px;padding-right:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-sorter{bottom:auto;justify-content:center;left:0;right:0;top:4px}.tabulator .tabulator-header .tabulator-frozen{left:0;position:sticky;z-index:11}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left{border-right:2px solid #aaa}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right{border-left:2px solid #aaa}.tabulator .tabulator-header .tabulator-calcs-holder{background:#f3f3f3!important;border-bottom:1px solid #aaa;border-top:1px solid #aaa;box-sizing:border-box;display:inline-block}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row{background:#f3f3f3!important}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle{display:none}.tabulator .tabulator-header .tabulator-frozen-rows-holder{display:inline-block}.tabulator .tabulator-header .tabulator-frozen-rows-holder:empty{display:none}.tabulator .tabulator-tableholder{-webkit-overflow-scrolling:touch;overflow:auto;position:relative;white-space:nowrap;width:100%}.tabulator .tabulator-tableholder:focus{outline:none}.tabulator .tabulator-tableholder .tabulator-placeholder{align-items:center;box-sizing:border-box;display:flex;justify-content:center;min-width:100%;width:100%}.tabulator .tabulator-tableholder .tabulator-placeholder[tabulator-render-mode=virtual]{min-height:100%}.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents{color:#ccc;display:inline-block;font-size:20px;font-weight:700;padding:10px;text-align:center;white-space:normal}.tabulator .tabulator-tableholder .tabulator-table{background-color:#fff;color:#333;display:inline-block;overflow:visible;position:relative;white-space:nowrap}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs{background:#e2e2e2!important;font-weight:700}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top{border-bottom:2px solid #aaa}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom{border-top:2px solid #aaa}.tabulator .tabulator-tableholder .tabulator-range-overlay{inset:0;pointer-events:none;position:absolute;z-index:10}.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range{border:1px solid #2975dd;box-sizing:border-box;position:absolute}.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range.tabulator-range-active:after{background-color:#2975dd;border-radius:999px;bottom:-3px;content:"";height:6px;position:absolute;right:-3px;width:6px}.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range-cell-active{border:2px solid #2975dd;box-sizing:border-box;position:absolute}.tabulator .tabulator-footer{background-color:#e6e6e6;border-top:1px solid #999;color:#555;font-weight:700;user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap}.tabulator .tabulator-footer .tabulator-footer-contents{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:5px 10px}.tabulator .tabulator-footer .tabulator-footer-contents:empty{display:none}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs{margin-top:-5px;overflow-x:auto}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab{border:1px solid #999;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top:none;display:inline-block;font-size:.9em;padding:5px}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab:hover{cursor:pointer;opacity:.7}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab.tabulator-spreadsheet-tab-active{background:#fff}.tabulator .tabulator-footer .tabulator-calcs-holder{background:#f3f3f3!important;border-bottom:1px solid #aaa;border-top:1px solid #aaa;box-sizing:border-box;overflow:hidden;text-align:left;width:100%}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row{background:#f3f3f3!important;display:inline-block}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle{display:none}.tabulator .tabulator-footer .tabulator-calcs-holder:only-child{border-bottom:none;margin-bottom:-5px}.tabulator .tabulator-footer>*+.tabulator-page-counter{margin-left:10px}.tabulator .tabulator-footer .tabulator-page-counter{font-weight:400}.tabulator .tabulator-footer .tabulator-paginator{color:#555;flex:1;font-family:inherit;font-size:inherit;font-weight:inherit;text-align:right}.tabulator .tabulator-footer .tabulator-page-size{border:1px solid #aaa;border-radius:3px;display:inline-block;margin:0 5px;padding:2px 5px}.tabulator .tabulator-footer .tabulator-pages{margin:0 7px}.tabulator .tabulator-footer .tabulator-page{background:hsla(0,0%,100%,.2);border:1px solid #aaa;border-radius:3px;display:inline-block;margin:0 2px;padding:2px 5px}.tabulator .tabulator-footer .tabulator-page.active{color:#d00}.tabulator .tabulator-footer .tabulator-page:disabled{opacity:.5}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-footer .tabulator-page:not(disabled):hover{background:rgba(0,0,0,.2);color:#fff;cursor:pointer}}.tabulator .tabulator-col-resize-handle{display:inline-block;margin-left:-3px;margin-right:-3px;position:relative;vertical-align:middle;width:6px;z-index:11}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-col-resize-handle:hover{cursor:ew-resize}}.tabulator .tabulator-col-resize-handle:last-of-type{margin-right:0;width:3px}.tabulator .tabulator-col-resize-guide{background-color:#999;height:100%;margin-left:-.5px;opacity:.5;position:absolute;top:0;width:4px}.tabulator .tabulator-row-resize-guide{background-color:#999;height:4px;left:0;margin-top:-.5px;opacity:.5;position:absolute;width:100%}.tabulator .tabulator-alert{align-items:center;background:rgba(0,0,0,.4);display:flex;height:100%;left:0;position:absolute;text-align:center;top:0;width:100%;z-index:100}.tabulator .tabulator-alert .tabulator-alert-msg{background:#fff;border-radius:10px;display:inline-block;font-size:16px;font-weight:700;margin:0 auto;padding:10px 20px}.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg{border:4px solid #333;color:#000}.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error{border:4px solid #d00;color:#590000}.tabulator-row{background-color:#fff;box-sizing:border-box;min-height:22px;position:relative}.tabulator-row.tabulator-row-even{background-color:#efefef}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selectable:hover{background-color:#bbb;cursor:pointer}}.tabulator-row.tabulator-selected{background-color:#9abcea}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selected:hover{background-color:#769bcc;cursor:pointer}}.tabulator-row.tabulator-row-moving{background:#fff;border:1px solid #000}.tabulator-row.tabulator-moving{border-bottom:1px solid #aaa;border-top:1px solid #aaa;pointer-events:none;position:absolute;z-index:15}.tabulator-row.tabulator-range-highlight .tabulator-cell.tabulator-range-row-header{background-color:#d6d6d6;color:#000}.tabulator-row.tabulator-range-highlight.tabulator-range-selected .tabulator-cell.tabulator-range-row-header,.tabulator-row.tabulator-range-selected .tabulator-cell.tabulator-range-row-header{background-color:#3876ca;color:#fff}.tabulator-row .tabulator-row-resize-handle{bottom:0;height:5px;left:0;position:absolute;right:0}.tabulator-row .tabulator-row-resize-handle.prev{bottom:auto;top:0}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-row-resize-handle:hover{cursor:ns-resize}}.tabulator-row .tabulator-responsive-collapse{border-bottom:1px solid #aaa;border-top:1px solid #aaa;box-sizing:border-box;padding:5px}.tabulator-row .tabulator-responsive-collapse:empty{display:none}.tabulator-row .tabulator-responsive-collapse table{font-size:14px}.tabulator-row .tabulator-responsive-collapse table tr td{position:relative}.tabulator-row .tabulator-responsive-collapse table tr td:first-of-type{padding-right:10px}.tabulator-row .tabulator-cell{border-right:1px solid #aaa;box-sizing:border-box;display:inline-block;outline:none;overflow:hidden;padding:4px;position:relative;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.tabulator-row .tabulator-cell.tabulator-row-header{background:#e6e6e6;border-bottom:1px solid #aaa;border-right:1px solid #999}.tabulator-row .tabulator-cell.tabulator-frozen{background-color:inherit;display:inline-block;left:0;position:sticky;z-index:11}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-right:2px solid #aaa}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-left:2px solid #aaa}.tabulator-row .tabulator-cell.tabulator-editing{border:1px solid #1d68cd;outline:none;padding:0}.tabulator-row .tabulator-cell.tabulator-editing input,.tabulator-row .tabulator-cell.tabulator-editing select{background:transparent;border:1px;outline:none}.tabulator-row .tabulator-cell.tabulator-validation-fail{border:1px solid #d00}.tabulator-row .tabulator-cell.tabulator-validation-fail input,.tabulator-row .tabulator-cell.tabulator-validation-fail select{background:transparent;border:1px;color:#d00}.tabulator-row .tabulator-cell.tabulator-row-handle{align-items:center;display:inline-flex;justify-content:center;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none}.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box{width:80%}.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar{background:#666;height:3px;margin-top:2px;width:100%}.tabulator-row .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header){background-color:#9abcea}.tabulator-row .tabulator-cell .tabulator-data-tree-branch-empty{display:inline-block;width:7px}.tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom:2px solid #aaa;border-bottom-left-radius:1px;border-left:2px solid #aaa;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-row .tabulator-cell .tabulator-data-tree-control{align-items:center;background:rgba(0,0,0,.1);border:1px solid #333;border-radius:2px;display:inline-flex;height:11px;justify-content:center;margin-right:5px;overflow:hidden;vertical-align:middle;width:11px}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-cell .tabulator-data-tree-control:hover{background:rgba(0,0,0,.2);cursor:pointer}}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse{background:transparent;display:inline-block;height:7px;position:relative;width:1px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after{background:#333;content:"";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand{background:#333;display:inline-block;height:7px;position:relative;width:1px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{background:#333;content:"";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle{align-items:center;background:#666;border-radius:20px;color:#fff;display:inline-flex;font-size:1.1em;font-weight:700;height:15px;justify-content:center;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;width:15px}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:hover{cursor:pointer;opacity:.7}}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-close{display:initial}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-open{display:none}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg{stroke:#fff}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close{display:none}.tabulator-row .tabulator-cell .tabulator-traffic-light{border-radius:14px;display:inline-block;height:14px;width:14px}.tabulator-row.tabulator-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #aaa;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-group:hover{background-color:rgba(0,0,0,.1);cursor:pointer}}.tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow{border-bottom:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #666;margin-right:10px}.tabulator-row.tabulator-group.tabulator-group-level-1{padding-left:30px}.tabulator-row.tabulator-group.tabulator-group-level-2{padding-left:50px}.tabulator-row.tabulator-group.tabulator-group-level-3{padding-left:70px}.tabulator-row.tabulator-group.tabulator-group-level-4{padding-left:90px}.tabulator-row.tabulator-group.tabulator-group-level-5{padding-left:110px}.tabulator-row.tabulator-group .tabulator-group-toggle{display:inline-block}.tabulator-row.tabulator-group .tabulator-arrow{border-bottom:6px solid transparent;border-left:6px solid #666;border-right:0;border-top:6px solid transparent;display:inline-block;height:0;margin-right:16px;vertical-align:middle;width:0}.tabulator-row.tabulator-group span{color:#d00;margin-left:10px}.tabulator-toggle{background:#dcdcdc;border:1px solid #ccc;box-sizing:border-box;display:flex;flex-direction:row}.tabulator-toggle.tabulator-toggle-on{background:#1c6cc2}.tabulator-toggle .tabulator-toggle-switch{background:#fff;border:1px solid #ccc;box-sizing:border-box}.tabulator-popup-container{-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #aaa;box-shadow:0 0 5px 0 rgba(0,0,0,.2);box-sizing:border-box;display:inline-block;font-size:14px;overflow-y:auto;position:absolute;z-index:10000}.tabulator-popup{border-radius:3px;padding:5px}.tabulator-tooltip{border-radius:2px;box-shadow:none;font-size:12px;max-width:Min(500px,100%);padding:3px 5px;pointer-events:none}.tabulator-menu .tabulator-menu-item{box-sizing:border-box;padding:5px 10px;position:relative;user-select:none}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled{opacity:.5}@media (hover:hover) and (pointer:fine){.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover{background:#efefef;cursor:pointer}}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu{padding-right:25px}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu:after{border-color:#aaa;border-style:solid;border-width:1px 1px 0 0;content:"";display:inline-block;height:7px;position:absolute;right:10px;top:calc(5px + .4em);transform:rotate(45deg);vertical-align:top;width:7px}.tabulator-menu .tabulator-menu-separator{border-top:1px solid #aaa}.tabulator-edit-list{-webkit-overflow-scrolling:touch;font-size:14px;max-height:200px;overflow-y:auto}.tabulator-edit-list .tabulator-edit-list-item{color:#333;outline:none;padding:4px}.tabulator-edit-list .tabulator-edit-list-item.active{background:#1d68cd;color:#fff}.tabulator-edit-list .tabulator-edit-list-item.active.focused{outline:1px solid hsla(0,0%,100%,.5)}.tabulator-edit-list .tabulator-edit-list-item.focused{outline:1px solid #1d68cd}@media (hover:hover) and (pointer:fine){.tabulator-edit-list .tabulator-edit-list-item:hover{background:#1d68cd;color:#fff;cursor:pointer}}.tabulator-edit-list .tabulator-edit-list-placeholder{color:#333;padding:4px;text-align:center}.tabulator-edit-list .tabulator-edit-list-group{border-bottom:1px solid #aaa;color:#333;font-weight:700;padding:6px 4px 4px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-2,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-2{padding-left:12px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-3,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-3{padding-left:20px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-4,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-4{padding-left:28px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-5,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-5{padding-left:36px}.tabulator.tabulator-ltr{direction:ltr}.tabulator.tabulator-rtl{direction:rtl;text-align:initial}.tabulator.tabulator-rtl .tabulator-header .tabulator-col{border-left:1px solid #aaa;border-right:initial;text-align:initial}.tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{margin-left:-1px;margin-right:0}.tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-left:25px;padding-right:0}.tabulator.tabulator-rtl .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{left:8px;right:auto}.tabulator.tabulator-rtl .tabulator-tableholder .tabulator-range-overlay .tabulator-range.tabulator-range-active:after{background-color:#2975dd;border-radius:999px;bottom:-3px;content:"";height:6px;left:-3px;position:absolute;right:auto;width:6px}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell{border-left:1px solid #aaa;border-right:initial}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom-left-radius:0;border-bottom-right-radius:1px;border-left:initial;border-right:2px solid #aaa;margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-control{margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-left:2px solid #aaa}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-right:2px solid #aaa}.tabulator.tabulator-rtl .tabulator-row .tabulator-col-resize-handle:last-of-type{margin-left:0;margin-right:-3px;width:3px}.tabulator.tabulator-rtl .tabulator-footer .tabulator-calcs-holder{text-align:initial}.tabulator-print-fullscreen{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10000}body.tabulator-print-fullscreen-hide>:not(.tabulator-print-fullscreen){display:none!important}.tabulator-print-table{border-collapse:collapse}.tabulator-print-table .tabulator-data-tree-branch{border-bottom:2px solid #aaa;border-bottom-left-radius:1px;border-left:2px solid #aaa;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-print-table .tabulator-print-table-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #aaa;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}@media (hover:hover) and (pointer:fine){.tabulator-print-table .tabulator-print-table-group:hover{background-color:rgba(0,0,0,.1);cursor:pointer}}.tabulator-print-table .tabulator-print-table-group.tabulator-group-visible .tabulator-arrow{border-bottom:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #666;margin-right:10px}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-1 td{padding-left:30px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-2 td{padding-left:50px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-3 td{padding-left:70px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-4 td{padding-left:90px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-5 td{padding-left:110px!important}.tabulator-print-table .tabulator-print-table-group .tabulator-group-toggle{display:inline-block}.tabulator-print-table .tabulator-print-table-group .tabulator-arrow{border-bottom:6px solid transparent;border-left:6px solid #666;border-right:0;border-top:6px solid transparent;display:inline-block;height:0;margin-right:16px;vertical-align:middle;width:0}.tabulator-print-table .tabulator-print-table-group span{color:#d00;margin-left:10px}.tabulator-print-table .tabulator-data-tree-control{align-items:center;background:rgba(0,0,0,.1);border:1px solid #333;border-radius:2px;display:inline-flex;height:11px;justify-content:center;margin-right:5px;overflow:hidden;vertical-align:middle;width:11px}@media (hover:hover) and (pointer:fine){.tabulator-print-table .tabulator-data-tree-control:hover{background:rgba(0,0,0,.2);cursor:pointer}}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse{background:transparent;display:inline-block;height:7px;position:relative;width:1px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after{background:#333;content:"";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand{background:#333;display:inline-block;height:7px;position:relative;width:1px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{background:#333;content:"";height:1px;left:-3px;position:absolute;top:3px;width:7px}
+/*# sourceMappingURL=tabulator.min.css.map */

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

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Dbwatcher
+  module Api
+    module V1
+      class SessionsController < BaseController
+        before_action :find_session, except: [:diagram_types]
+
+        def changes_data
+          Rails.logger.info "API::V1::SessionsController#changes_data: Getting changes for session #{@session.id}"
+
+          # Paginated, filtered changes data
+          # Convert ActionController::Parameters to a hash before passing to service
+          service = Dbwatcher::Services::Api::ChangesDataService.new(@session, filter_params.to_h)
+          render json: service.call
+        end
+
+        def summary_data
+          Rails.logger.info "API::V1::SessionsController#summary_data: Getting summary for session #{@session.id}"
+
+          # Aggregated summary statistics
+          service = Dbwatcher::Services::Api::SummaryDataService.new(@session)
+          render json: service.call
+        end
+
+        def diagram_data
+          Rails.logger.info "API::V1::SessionsController#diagram_data: Getting diagram for session #{@session.id}"
+
+          # Generated diagram content with caching
+          # Convert ActionController::Parameters to a hash before passing to service
+          diagram_params = params.to_unsafe_h
+          service = Dbwatcher::Services::Api::DiagramDataService.new(@session, params[:type], diagram_params)
+          result = service.call
+
+          if result[:error]
+            render json: { error: result[:error] }, status: :unprocessable_entity
+          else
+            render json: result
+          end
+        end
+
+        def diagram_types
+          Rails.logger.info "API::V1::SessionsController#diagram_types: Getting available diagram types"
+
+          render json: {
+            types: Dbwatcher::Services::Api::DiagramDataService.available_types_with_metadata,
+            default_type: "database_tables"
+          }
+        end
+
+        private
+
+        def find_session
+          @session = Storage.sessions.find(params[:id])
+          render json: { error: "Session not found" }, status: :not_found unless @session
+        end
+
+        def filter_params
+          params.permit(:table, :operation, :page, :per_page)
+        end
+      end
+    end
+  end
+end

data/app/controllers/dbwatcher/base_controller.rb

@@ -0,0 +1,101 @@
+# frozen_string_literal: true
+
+module Dbwatcher
+  # Base controller for all Dbwatcher controllers
+  # Provides common functionality and configuration for the entire engine
+  class BaseController < ActionController::Base
+    protect_from_forgery with: :exception
+    layout "dbwatcher/application"
+
+    before_action :set_current_time
+    before_action :log_request_info
+
+    # Common error handling
+    rescue_from StandardError, with: :handle_error
+
+    # Include helpers
+    helper Dbwatcher::ApplicationHelper
+    helper Dbwatcher::FormattingHelper
+    helper Dbwatcher::DiagramHelper if defined?(Dbwatcher::DiagramHelper)
+
+    protected
+
+    # Set current time for consistent timestamp usage across views
+    def set_current_time
+      @current_time = Time.current
+    end
+
+    # Log request information for debugging
+    def log_request_info
+      return unless Rails.logger
+
+      Rails.logger.info "DBWatcher Request: #{request.method} #{request.path} - Controller: #{self.class.name}"
+    end
+
+    # Common error handling for all controllers
+    def handle_error(exception)
+      Rails.logger.error "DBWatcher Error in #{self.class.name}##{action_name}: #{exception.message}"
+      Rails.logger.error exception.backtrace.join("\n") if Rails.env.development?
+
+      respond_to do |format|
+        format.html do
+          flash[:error] = "An error occurred while processing your request."
+          # Avoid infinite redirect by using main app root or request referer
+          redirect_to(request.referer || main_app.root_path)
+        end
+        format.json do
+          render json: { error: "Internal server error" }, status: :internal_server_error
+        end
+      end
+    end
+
+    # Helper method for safely extracting data from hashes with symbol/string keys
+    def safe_extract(data, key)
+      return nil unless data.is_a?(Hash)
+
+      data[key] || data[key.to_s]
+    end
+
+    # Helper method for formatting timestamps consistently
+    def format_timestamp(timestamp_str)
+      return "N/A" unless timestamp_str
+
+      Time.parse(timestamp_str).strftime("%Y-%m-%d %H:%M:%S")
+    rescue ArgumentError
+      "N/A"
+    end
+
+    # Make helper methods available to views
+    helper_method :format_timestamp, :safe_extract
+
+    # Helper method for rendering JSON responses with consistent structure
+    def render_json_response(data, status: :ok)
+      render json: {
+        status: status,
+        data: data,
+        timestamp: @current_time.iso8601
+      }, status: status
+    end
+
+    # Helper method for handling not found resources
+    def handle_not_found(resource_name, redirect_path)
+      Rails.logger.warn "#{self.class.name}##{action_name}: #{resource_name} not found for ID: #{params[:id]}"
+
+      respond_to do |format|
+        format.html do
+          redirect_to redirect_path, alert: "#{resource_name} not found"
+        end
+        format.json do
+          render json: { error: "#{resource_name} not found" }, status: :not_found
+        end
+      end
+    end
+
+    # Helper method for clearing storage with consistent messaging
+    def clear_storage_with_message(storage_method, resource_name, redirect_path)
+      cleared_count = storage_method.call
+      redirect_to redirect_path,
+                  notice: "#{resource_name} cleared (#{cleared_count} files removed)"
+    end
+  end
+end

data/app/controllers/dbwatcher/dashboard_controller.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Dbwatcher
+  class DashboardController < BaseController
+    def index
+      dashboard_data = Dbwatcher::Services::DashboardDataAggregator.call
+      @recent_sessions = dashboard_data[:recent_sessions]
+      @active_tables = dashboard_data[:active_tables]
+      @query_stats = dashboard_data[:query_stats]
+    end
+
+    def clear_all
+      clear_storage_with_message(
+        -> { Storage.clear_all },
+        "All sessions and SQL logs",
+        root_path
+      )
+    end
+  end
+end

data/app/controllers/dbwatcher/queries_controller.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Dbwatcher
+  class QueriesController < BaseController
+    def index
+      @date = params[:date] || Date.current.strftime("%Y-%m-%d")
+      queries = Storage.queries.for_date(@date).all
+      @queries = Dbwatcher::Services::QueryFilterProcessor.call(queries, params)
+
+      respond_to do |format|
+        format.html
+        format.json { render json: @queries }
+      end
+    end
+
+    def clear
+      clear_storage_with_message(
+        -> { Storage.query_storage.clear_all },
+        "SQL query logs",
+        queries_path
+      )
+    end
+  end
+end

data/app/controllers/dbwatcher/sessions_controller.rb

@@ -1,38 +1,48 @@
 # frozen_string_literal: true
 
 module Dbwatcher
-  class SessionsController < ActionController::Base
-    protect_from_forgery with: :exception
-    layout "dbwatcher/application"
+  class SessionsController < BaseController
+    before_action :find_session, except: [:index]
 
     def index
-      @sessions = Storage.all_sessions
+      @sessions = Storage.sessions.all
     end
 
     def show
-      @session = Storage.load_session(params[:id])
+      redirect_to changes_session_path(@session.id)
+    end
 
-      respond_to do |format|
-        format.html
-        format.json { render json: @session.to_h }
-      end
+    def changes
+      Rails.logger.info "SessionsController#changes: Loading changes for session #{@session.id}"
+      # No server-side data processing - API-first architecture
     end
 
-    def destroy_all
-      Dbwatcher.reset!
-      redirect_to root_path, notice: "All sessions cleared"
+    def summary
+      Rails.logger.info "SessionsController#summary: Loading summary for session #{@session.id}"
+      # No server-side data processing - API-first architecture
     end
 
-    private
+    def diagrams
+      Rails.logger.info "SessionsController#diagrams: Loading diagrams for session #{@session.id}"
+      # No server-side data processing - API-first architecture
+    end
 
-    # Helper method to safely get the sessions path
-    def sessions_index_path
-      if respond_to?(:sessions_path)
+    def clear
+      clear_storage_with_message(
+        -> { Storage.session_storage.clear_all },
+        "All sessions",
         sessions_path
-      else
-        "/dbwatcher"
-      end
+      )
+    end
+
+    private
+
+    def find_session
+      @session = Storage.sessions.find(params[:id])
+      handle_not_found("Session", sessions_path) unless @session
     end
-    helper_method :sessions_index_path
+
+    # No longer needed with API-first architecture
+    # All data processing happens in API services and is loaded via JavaScript
   end
 end

data/app/controllers/dbwatcher/tables_controller.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Dbwatcher
+  class TablesController < BaseController
+    def index
+      @tables = Dbwatcher::Services::TableStatisticsCollector.call
+    end
+
+    def show
+      @table_name = params[:id]
+      @changes = Storage.tables.changes_for(@table_name).all
+      @sessions = @changes.map { |c| c[:session_id] }.uniq
+
+      respond_to do |format|
+        format.html
+        format.json { render json: @changes }
+      end
+    end
+
+    def changes
+      @table_name = params[:id]
+      @changes = Storage.tables.changes_for(@table_name).all
+      @sessions = extract_session_ids(@changes)
+      @records = group_changes_by_record(@changes)
+    end
+
+    private
+
+    # These remain as they are simple data extraction helpers
+    def extract_session_ids(changes)
+      changes.map { |c| c[:session_id] }.uniq
+    end
+
+    def group_changes_by_record(changes)
+      changes.group_by { |c| c[:record_id] }
+    end
+  end
+end

data/app/helpers/dbwatcher/application_helper.rb

@@ -0,0 +1,103 @@
+# frozen_string_literal: true
+
+module Dbwatcher
+  module ApplicationHelper
+    include FormattingHelper
+    include SessionHelper
+
+    # Common view helpers for templates
+
+    # Create icon HTML for stats cards
+    def stats_icon(type)
+      icon_html = icon_definitions[type.to_sym]
+      icon_html&.html_safe
+    end
+
+    private
+
+    # Icon definitions for stats cards
+    def icon_definitions
+      {
+        sessions: sessions_icon_svg,
+        tables: tables_icon_svg,
+        queries: queries_icon_svg,
+        performance: performance_icon_svg
+      }
+    end
+
+    def sessions_icon_svg
+      <<~SVG
+        <svg class="w-4 h-4 text-blue-medium" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
+          <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
+        </svg>
+      SVG
+    end
+
+    def tables_icon_svg
+      <<~SVG
+        <svg class="w-4 h-4 text-gold-dark" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"/>
+        </svg>
+      SVG
+    end
+
+    def queries_icon_svg
+      <<~SVG
+        <svg class="w-4 h-4 text-blue-light" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/>
+        </svg>
+      SVG
+    end
+
+    def performance_icon_svg
+      <<~SVG
+        <svg class="w-4 h-4 text-gold-light" 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>
+      SVG
+    end
+
+    public
+
+    # Generate operation badges for tables
+    def operation_badges
+      content_tag(:div, class: "flex gap-1 justify-center") do
+        [
+          content_tag(:span, "I", class: "badge badge-insert", title: "Inserts"),
+          content_tag(:span, "U", class: "badge badge-update", title: "Updates"),
+          content_tag(:span, "D", class: "badge badge-delete", title: "Deletes")
+        ].join.html_safe
+      end
+    end
+
+    # Create action buttons with consistent styling
+    def action_button(text, path, color: "blue")
+      link_to text, path, class: "px-3 py-1 text-xs bg-#{color}-600 text-white rounded hover:bg-#{color}-700"
+    end
+
+    # Safe value extraction with fallback
+    def safe_value(data, key, fallback = "N/A")
+      return fallback unless data.is_a?(Hash)
+
+      data[key] || data[key.to_s] || fallback
+    end
+
+    # Format count with proper fallback
+    def format_count(value)
+      value.to_i.to_s
+    end
+
+    # Create empty state message
+    def empty_state(message, icon: nil)
+      content_tag(:div, class: "text-center py-8 text-gray-500") do
+        content = []
+        content << icon if icon
+        content << content_tag(:p, message, class: "text-xs")
+        content.join.html_safe
+      end
+    end
+  end
+end

data/app/helpers/dbwatcher/component_helper.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Dbwatcher
+  module ComponentHelper
+    # Removed as part of API-first migration (Story 6.8)
+    # All data is now loaded directly from API endpoints
+
+    # Removed as part of API-first migration (Story 6.8)
+    # All data is now loaded directly from API endpoints
+
+    # Removed as part of API-first migration (Story 6.8)
+    # All data is now loaded directly from API endpoints
+
+    # Generate data attributes for component binding
+    def dbwatcher_component(component_name, config)
+      {
+        "data-dbwatcher" => component_name,
+        "data-config" => config.to_json
+      }
+    end
+
+    # Helper to render a DBWatcher component
+    def render_dbwatcher_component(component_name, config, html_options = {})
+      content_tag :div, dbwatcher_component(component_name, config).merge(html_options) do
+        yield if block_given?
+      end
+    end
+  end
+end