fix: side-by-side diff view, reason field naming, sanitization, auto-refresh

Side-by-side diff view:
- Replaced JSON blob diff with color-coded side-by-side Before/After tables
- Smart column selection: wide CSVs show only changed + key columns (max 8)
- Row capping: first 10 edits in detail, rest in compact expandable table
- Stats bar with add/remove/edit counts, column change badges

Reason field consistency (renamed for clear naming convention):
- remove_reason → row_remove_reason (row removal events)
- edit_reason → row_edit_reason (row edit events)
- column_remove_reason (new, was sharing remove_reason)
- All dashboard coalesce chains updated to match

Fixes:
- Inline multi-edit approval: new submitInlineMultiEditApproval() function
  (old path crashed on null.length when col/val were undefined)
- Counter correction for approval replay drift (diff misclassifies edits as adds)
- Usage tracking always increments (was skipped for approval replays)
- reset_daily_usage "all" fix (was treated as username, not keyword)
- Queue KeyError fix: item.get() for heterogeneous queue entries
- Limit cap: editor and admin limits capped at 100 (was 1000/9999)
- Reserved _ prefix columns blocked at backend (prevents limit bypass)
- original_payload reason fields sanitized before storage
- Auto-refresh on ALL approval types (was only create/remove)
- Pending approval bar: no more duplicated reason text
- Approval description uses analyst's reason (not auto-generated text)
- Backend stores comment field in approval queue entries

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: wildleo91

appserver/static/control_panel.js

@@ -367,7 +367,7 @@ require([
                 var csvDisplay = isRuleOp ? "N/A" : item.csv_file;
                 var ruleDisplay = item.detection_rule || "";
                 // Combine description with payload-extracted reason for full context
-                var analystReason = item.description || extractRequestReason(item) || "";
+                var analystReason = item.comment || item.description || extractRequestReason(item) || "";
                 html += '<tr>' +
                     '<td style="font-size:11px;word-break:break-all">' + _.escape(item.request_id) + '</td>' +
                     '<td>' + _.escape(tsStr) + '</td>' +
@@ -428,7 +428,7 @@ require([
                 var isRuleOp = item.csv_file === "__rule_operation__";
                 var csvDisplay = isRuleOp ? "N/A" : item.csv_file;
                 var ruleDisplay = item.detection_rule || "";
-                var analystReason = item.description || extractRequestReason(item) || "";
+                var analystReason = item.comment || item.description || extractRequestReason(item) || "";
                 var adminResponse = item.rejection_reason || item.cancellation_reason ||
                                     item.admin_comment || "";
                 html += '<tr>' +
@@ -1898,7 +1898,7 @@ require([
                 '<td style="color:var(--wl-muted,#888)">' + def + '</td>' +
                 '<td><input type="number" class="wl-admin-limit-input" ' +
                 'data-key="' + f.key + '" value="' + cur + '" ' +
-                'min="0" max="9999" style="width:80px;padding:4px 8px;' +
+                'min="0" max="100" style="width:80px;padding:4px 8px;' +
                 'background:var(--wl-bg-main,#1a1c1e);color:var(--wl-text,#e0e0e0);' +
                 'border:1px solid var(--wl-border,#444);border-radius:4px"></td>' +
                 '</tr>';

appserver/static/whitelist_manager.css

@@ -641,50 +641,146 @@ body.wl-resizing * {
     margin-bottom: 14px;
 }
 
-.wl-diff-added h5 {
-    color: var(--wl-diff-add);
-    margin: 0 0 4px;
+.wl-diff-section h5 {
+    margin: 0 0 8px;
+    font-size: 13px;
 }
 
-.wl-diff-added li {
-    color: var(--wl-diff-add);
-    font-family: "Courier New", monospace;
+/* ── Side-by-side diff table ─────────────────────────────────────── */
+
+.wl-diff-sbs {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    margin-bottom: 14px;
+}
+
+.wl-diff-pane {
+    border: 1px solid var(--wl-border, #444);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.wl-diff-pane-header {
+    padding: 6px 12px;
+    font-weight: bold;
     font-size: 12px;
-    word-break: break-all;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
 
-.wl-diff-removed h5 {
+.wl-diff-pane-before .wl-diff-pane-header {
+    background: rgba(198, 40, 40, 0.15);
     color: var(--wl-diff-rm);
-    margin: 0 0 4px;
+    border-bottom: 2px solid var(--wl-diff-rm);
 }
 
-.wl-diff-removed li {
-    color: var(--wl-diff-rm);
-    font-family: "Courier New", monospace;
+.wl-diff-pane-after .wl-diff-pane-header {
+    background: rgba(46, 125, 50, 0.15);
+    color: var(--wl-diff-add);
+    border-bottom: 2px solid var(--wl-diff-add);
+}
+
+.wl-diff-pane table {
+    width: 100%;
+    border-collapse: collapse;
     font-size: 12px;
-    word-break: break-all;
+    font-family: "Courier New", Consolas, monospace;
 }
 
-.wl-diff-pre {
-    background: #1e1e1e;
-    color: #d4d4d4;
-    padding: 12px 14px;
-    border-radius: 4px;
+.wl-diff-pane th {
+    padding: 4px 8px;
+    text-align: left;
+    font-weight: bold;
+    border-bottom: 1px solid var(--wl-border, #444);
+    background: var(--wl-bg-row, #23272b);
+    color: var(--wl-muted, #888);
+    font-size: 11px;
+}
+
+.wl-diff-pane td {
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--wl-border-section, #333);
+    word-break: break-word;
+    max-width: 300px;
+}
+
+.wl-diff-cell-changed {
+    font-weight: bold;
+}
+
+.wl-diff-pane-before .wl-diff-cell-changed {
+    background: rgba(198, 40, 40, 0.12);
+    color: var(--wl-diff-rm);
+}
+
+.wl-diff-pane-after .wl-diff-cell-changed {
+    background: rgba(46, 125, 50, 0.12);
+    color: var(--wl-diff-add);
+}
+
+/* ── Row-level additions/removals ──────────────────────────────── */
+
+.wl-diff-row-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.wl-diff-row-list li {
+    padding: 4px 10px;
+    font-family: "Courier New", Consolas, monospace;
     font-size: 12px;
-    overflow-x: auto;
-    line-height: 1.6;
+    border-bottom: 1px solid var(--wl-border-section, #333);
+}
+
+.wl-diff-row-add {
+    background: rgba(46, 125, 50, 0.08);
+    color: var(--wl-diff-add);
+}
+
+.wl-diff-row-add::before {
+    content: "+ ";
+    font-weight: bold;
 }
 
-.wl-diff-line-add {
-    color: #4ec94e;
+.wl-diff-row-rm {
+    background: rgba(198, 40, 40, 0.08);
+    color: var(--wl-diff-rm);
 }
 
-.wl-diff-line-rm {
-    color: #f44336;
+.wl-diff-row-rm::before {
+    content: "- ";
+    font-weight: bold;
+}
+
+/* ── Column changes ──────────────────────────────────────────────── */
+
+.wl-diff-col-badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 3px;
+    font-size: 11px;
+    margin: 2px 4px 2px 0;
+}
+
+.wl-diff-col-add {
+    background: rgba(46, 125, 50, 0.15);
+    color: var(--wl-diff-add);
+    border: 1px solid var(--wl-diff-add);
+}
+
+.wl-diff-col-rm {
+    background: rgba(198, 40, 40, 0.15);
+    color: var(--wl-diff-rm);
+    border: 1px solid var(--wl-diff-rm);
 }
 
-.wl-diff-line-info {
-    color: #64b5f6;
+/* ── Responsive: stack on narrow screens ─────────────────────────── */
+@media (max-width: 900px) {
+    .wl-diff-sbs {
+        grid-template-columns: 1fr;
+    }
 }
 
 /* ── Date/Time Picker ──────────────────────────────────────────────── */