proofscan 0.10.32 → 0.10.34

package/dist/html/templates.js

@@ -6,7 +6,7 @@
  */
 import { formatBytes } from '../eventline/types.js';
 import { getStatusSymbol, SHORT_ID_LENGTH } from './types.js';
-import { getRpcInspectorStyles, getRpcInspectorScript, renderJsonWithPaths, renderRequestSummary, renderResponseSummary, renderSummaryRowsHtml, } from './rpc-inspector.js';
+import { getRpcInspectorStyles, getRpcInspectorScript, renderJsonWithPaths, renderRequestSummary, renderResponseSummary, renderSummaryRowsHtml, detectSensitiveKeys, } from './rpc-inspector.js';
 /**
  * Escape HTML special characters to prevent XSS
  */
@@ -105,6 +105,21 @@ function getRpcReportStyles() {
     .badge.status-OK { border-color: var(--status-ok); color: var(--status-ok); }
     .badge.status-ERR { border-color: var(--status-err); color: var(--status-err); }
     .badge.status-PENDING { border-color: var(--status-pending); color: var(--status-pending); }
+    /* Sensitive content warning badge (Phase 12.x-c) */
+    .sensitive-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px;
+      margin-left: 8px;
+      background: rgba(210, 153, 34, 0.15);
+      border: 1px solid rgba(210, 153, 34, 0.3);
+      border-radius: 12px;
+      font-size: 11px;
+      font-weight: 500;
+      color: #d29922;
+      vertical-align: middle;
+    }
     .section {
       background: var(--bg-secondary);
       border-radius: 8px;
@@ -231,6 +246,21 @@ function getSessionReportStyles() {
     .badge.status-OK { border-color: var(--status-ok); color: var(--status-ok); }
     .badge.status-ERR { border-color: var(--status-err); color: var(--status-err); }
     .badge.status-PENDING { border-color: var(--status-pending); color: var(--status-pending); }
+    /* Sensitive content warning badge (Phase 12.x-c) */
+    .sensitive-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px;
+      margin-left: 8px;
+      background: rgba(210, 153, 34, 0.15);
+      border: 1px solid rgba(210, 153, 34, 0.3);
+      border-radius: 12px;
+      font-size: 11px;
+      font-weight: 500;
+      color: #d29922;
+      vertical-align: middle;
+    }
     /* Two-pane layout */
     .container {
       display: flex;
@@ -470,19 +500,29 @@ function getSessionReportScript() {
       const requestRawHtml = rpc._requestRawHtml || '<span class="json-null">(no data)</span>';
       const responseRawHtml = rpc._responseRawHtml || '<span class="json-null">(no data)</span>';
 
+      // Sensitive content warning badge (Phase 12.x-c)
+      // Escape keys to prevent XSS via malicious key names
+      const sensitiveKeys = (rpc._sensitiveKeys || []).map(function(k) { return escapeHtml(k); });
+      const sensitiveTooltip = sensitiveKeys.length > 5
+        ? 'Contains ' + sensitiveKeys.length + ' sensitive keys: ' + sensitiveKeys.slice(0, 5).join(', ') + '...'
+        : 'Contains sensitive keys: ' + sensitiveKeys.join(', ');
+      const sensitiveBadge = rpc._hasSensitive
+        ? '<span class="sensitive-badge" title="' + escapeHtml(sensitiveTooltip) + '">⚠ Sensitive</span>'
+        : '';
+
       // Determine default target based on method (response-focused methods default to response)
       const defaultTarget = (rpc.method === 'tools/list' || rpc.method === 'initialize' || rpc.method.startsWith('resources/') || rpc.method.startsWith('prompts/')) ? 'response' : 'request';
 
       rightPane.innerHTML =
         '<div class="detail-section">' +
-        '  <h2>RPC Info</h2>' +
+        '  <h2>RPC Info' + sensitiveBadge + '</h2>' +
         '  <div class="rpc-info-grid">' +
         '    <div class="rpc-info-item"><dt>RPC ID</dt><dd><span class="badge">' + escapeHtml(rpc.rpc_id) + '</span></dd></div>' +
         '    <div class="rpc-info-item"><dt>Method</dt><dd><span class="badge">' + escapeHtml(rpc.method) + '</span></dd></div>' +
         '    <div class="rpc-info-item"><dt>Status</dt><dd><span class="badge ' + statusClass + '">' + statusSymbol + ' ' + rpc.status + (rpc.error_code !== null ? ' (code: ' + rpc.error_code + ')' : '') + '</span></dd></div>' +
         '    <div class="rpc-info-item"><dt>Latency</dt><dd><span class="badge">' + latency + '</span></dd></div>' +
-        '    <div class="rpc-info-item"><dt>Req Size</dt><dd>' + formatBytes(rpc.request.size) + '</dd></div>' +
-        '    <div class="rpc-info-item"><dt>Res Size</dt><dd>' + formatBytes(rpc.response.size) + '</dd></div>' +
+        '    <div class="rpc-info-item"><dt>Request</dt><dd>' + escapeHtml(rpc.request_ts) + '</dd></div>' +
+        '    <div class="rpc-info-item"><dt>Response</dt><dd>' + escapeHtml(rpc.response_ts || '-') + '</dd></div>' +
         '  </div>' +
         '</div>' +
         '<div class="detail-section">' +
@@ -717,15 +757,22 @@ export function generateSessionHtml(report) {
     const rpcRows = rpcs.map((rpc, idx) => renderRpcRow(rpc, idx)).join('\n');
     // Pre-render summary and raw JSON HTML for each RPC (for RPC Inspector)
     // Now generates separate request/response summaries for Req/Res toggle
+    // Also detect sensitive content for warning badge (Phase 12.x-c)
     const rpcsWithInspectorHtml = rpcs.map((rpc) => {
         const requestSummaryRows = renderRequestSummary(rpc.method, rpc.request.json);
         const responseSummaryRows = renderResponseSummary(rpc.method, rpc.response.json);
+        // Detect sensitive keys in request/response
+        const reqSensitiveKeys = detectSensitiveKeys(rpc.request.json);
+        const resSensitiveKeys = detectSensitiveKeys(rpc.response.json);
+        const hasSensitive = reqSensitiveKeys.length > 0 || resSensitiveKeys.length > 0;
         return {
             ...rpc,
             _requestSummaryHtml: renderSummaryRowsHtml(requestSummaryRows),
             _responseSummaryHtml: renderSummaryRowsHtml(responseSummaryRows),
             _requestRawHtml: renderJsonWithPaths(rpc.request.json, '#'),
             _responseRawHtml: renderJsonWithPaths(rpc.response.json, '#'),
+            _hasSensitive: hasSensitive,
+            _sensitiveKeys: [...reqSensitiveKeys, ...resSensitiveKeys],
         };
     });
     const reportWithInspectorHtml = {
@@ -822,8 +869,9 @@ function getConnectorReportStyles() {
       --status-pending: #d29922;
       --border-color: #30363d;
       --link-color: #58a6ff;
-      --sessions-pane-width: 280px;
-      --left-pane-width: 420px;
+      --sessions-pane-width: 360px;
+      --left-pane-width: 480px;
+      --raw-pane-max-width: 480px;
     }
     * { box-sizing: border-box; }
     html, body {
@@ -972,6 +1020,21 @@ function getConnectorReportStyles() {
     .badge.status-PENDING { border-color: var(--status-pending); color: var(--status-pending); }
     .badge.cap-enabled { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(0, 212, 255, 0.1); }
     .badge.cap-disabled { border-color: var(--border-color); color: var(--text-secondary); background: transparent; opacity: 0.5; }
+    /* Sensitive content warning badge (Phase 12.x-c) */
+    .sensitive-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px;
+      margin-left: 8px;
+      background: rgba(210, 153, 34, 0.15);
+      border: 1px solid rgba(210, 153, 34, 0.3);
+      border-radius: 12px;
+      font-size: 11px;
+      font-weight: 500;
+      color: #d29922;
+      vertical-align: middle;
+    }
 
     /* Connector info cards container (side by side) */
     .connector-info-cards {
@@ -1068,15 +1131,43 @@ function getConnectorReportStyles() {
     .sessions-list {
       flex: 1;
       overflow-y: auto;
-      padding: 8px;
+      padding: 4px 8px;
+    }
+    .sessions-header-row {
+      display: grid;
+      grid-template-columns: 70px 1fr 60px 50px;
+      gap: 8px;
+      padding: 4px 8px;
+      font-size: 10px;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      border-bottom: 1px solid var(--border-color);
+      margin-bottom: 4px;
     }
     .session-item {
-      padding: 10px 12px;
-      border-radius: 6px;
+      display: grid;
+      grid-template-columns: 70px 1fr auto 50px 50px;
+      gap: 8px;
+      align-items: center;
+      padding: 6px 8px;
+      border-radius: 4px;
       cursor: pointer;
-      margin-bottom: 6px;
+      margin-bottom: 2px;
       border: 1px solid transparent;
       background: var(--bg-primary);
+      font-size: 11px;
+    }
+    .session-item .session-counts {
+      display: flex;
+      gap: 6px;
+      font-size: 10px;
+      color: var(--text-secondary);
+    }
+    .session-item .session-counts span {
+      white-space: nowrap;
+    }
+    .session-item .session-extra {
+      justify-self: end;
     }
     .session-item:hover {
       background: rgba(0, 212, 255, 0.1);
@@ -1093,26 +1184,22 @@ function getConnectorReportStyles() {
       0% { box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.6); }
       100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }
     }
-    .session-item-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 4px;
-    }
     .session-item .session-id {
       font-family: 'SFMono-Regular', Consolas, monospace;
       color: var(--accent-blue);
-      font-size: 0.85em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
-    .session-item .session-meta {
-      font-size: 0.75em;
+    .session-item .session-timestamp {
       color: var(--text-secondary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
-    .session-item .session-stats {
-      display: flex;
-      gap: 8px;
-      font-size: 0.75em;
+    .session-item .session-latency {
       color: var(--text-secondary);
+      text-align: right;
     }
 
     /* Session detail pane (middle) */
@@ -1268,6 +1355,131 @@ function getConnectorReportStyles() {
       background: var(--accent-blue);
     }
 
+    /* Events View Toggle (Issue #59) */
+    .view-toggle {
+      display: flex;
+      gap: 2px;
+      padding: 8px 12px;
+      border-bottom: 1px solid var(--border-color);
+      background: var(--bg-secondary);
+    }
+    .view-toggle-btn {
+      background: transparent;
+      border: 1px solid var(--border-color);
+      color: var(--text-secondary);
+      padding: 4px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 11px;
+      transition: all 0.15s;
+    }
+    .view-toggle-btn:first-child {
+      border-radius: 4px 0 0 4px;
+    }
+    .view-toggle-btn:last-child {
+      border-radius: 0 4px 4px 0;
+    }
+    .view-toggle-btn:hover {
+      border-color: var(--accent-blue);
+      color: var(--text-primary);
+    }
+    .view-toggle-btn.active {
+      background: rgba(0, 212, 255, 0.15);
+      border-color: var(--accent-blue);
+      color: var(--accent-blue);
+    }
+    .view-toggle-count {
+      font-size: 10px;
+      color: var(--text-secondary);
+      margin-left: 4px;
+    }
+
+    /* Events List (Issue #59) */
+    .events-list {
+      flex: 1;
+      overflow-y: auto;
+      display: none;
+    }
+    .events-list.active {
+      display: block;
+    }
+    .rpc-list.hidden {
+      display: none;
+    }
+    .events-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.85em;
+    }
+    .events-table th {
+      text-align: left;
+      color: var(--text-secondary);
+      border-bottom: 1px solid var(--border-color);
+      padding: 6px 8px;
+      font-weight: 500;
+      position: sticky;
+      top: 0;
+      background: var(--bg-primary);
+      z-index: 1;
+    }
+    .events-table td {
+      padding: 6px 8px;
+      border-bottom: 1px solid var(--border-color);
+      white-space: nowrap;
+    }
+    .event-row {
+      cursor: pointer;
+    }
+    .event-row:hover {
+      background: rgba(0, 212, 255, 0.1);
+    }
+    .event-row.selected {
+      background: rgba(0, 212, 255, 0.2);
+    }
+
+    /* Event kind badges */
+    .badge-kind-request {
+      background: rgba(0, 212, 255, 0.15);
+      color: var(--accent-blue);
+      border: 1px solid rgba(0, 212, 255, 0.3);
+    }
+    .badge-kind-response {
+      background: rgba(63, 185, 80, 0.15);
+      color: var(--accent-green);
+      border: 1px solid rgba(63, 185, 80, 0.3);
+    }
+    .badge-kind-notification {
+      background: rgba(210, 153, 34, 0.15);
+      color: var(--accent-yellow);
+      border: 1px solid rgba(210, 153, 34, 0.3);
+    }
+    .badge-kind-transport_event {
+      background: var(--bg-tertiary);
+      color: var(--text-secondary);
+      border: 1px solid var(--border-color);
+    }
+
+    /* Event direction arrows */
+    .direction-arrow {
+      font-size: 18px;
+      font-weight: bold;
+      line-height: 1;
+      cursor: help;
+    }
+    .direction-arrow.outgoing {
+      color: var(--accent-blue);
+    }
+    .direction-arrow.incoming {
+      color: var(--accent-green);
+    }
+
+    /* Events loading state */
+    .events-loading {
+      padding: 24px;
+      text-align: center;
+      color: var(--text-secondary);
+    }
+
     /* Analytics Panel (Phase 5.2) - Revised Layout */
 
     /* Header with KPI stats inline */
@@ -1549,6 +1761,8 @@ function getConnectorReportScript() {
 
     let currentSessionId = null;
     let currentRpcIdx = null;
+    let currentEventIdx = null;
+    let currentViewMode = 'rpc'; // 'rpc' or 'events'
 
     // Connector info toggle
     const connectorInfo = document.querySelector('.connector-info');
@@ -1590,6 +1804,8 @@ function getConnectorReportScript() {
       if (currentSessionId === sessionId) return;
       currentSessionId = sessionId;
       currentRpcIdx = null;
+      currentEventIdx = null;
+      currentViewMode = 'rpc'; // Reset to RPC view
 
       // Update session list selection
       document.querySelectorAll('.session-item').forEach(item => {
@@ -1641,19 +1857,29 @@ function getConnectorReportScript() {
       const requestRawHtml = rpc._requestRawHtml || '<span class="json-null">(no data)</span>';
       const responseRawHtml = rpc._responseRawHtml || '<span class="json-null">(no data)</span>';
 
+      // Sensitive content warning badge (Phase 12.x-c)
+      // Escape keys to prevent XSS via malicious key names
+      const sensitiveKeys = (rpc._sensitiveKeys || []).map(function(k) { return escapeHtml(k); });
+      const sensitiveTooltip = sensitiveKeys.length > 5
+        ? 'Contains ' + sensitiveKeys.length + ' sensitive keys: ' + sensitiveKeys.slice(0, 5).join(', ') + '...'
+        : 'Contains sensitive keys: ' + sensitiveKeys.join(', ');
+      const sensitiveBadge = rpc._hasSensitive
+        ? '<span class="sensitive-badge" title="' + escapeHtml(sensitiveTooltip) + '">⚠ Sensitive</span>'
+        : '';
+
       // Determine default target based on method (response-focused methods default to response)
       const defaultTarget = (rpc.method === 'tools/list' || rpc.method === 'initialize' || rpc.method.startsWith('resources/') || rpc.method.startsWith('prompts/')) ? 'response' : 'request';
 
       rightPane.innerHTML =
         '<div class="detail-section">' +
-        '  <h2>RPC Info</h2>' +
+        '  <h2>RPC Info' + sensitiveBadge + '</h2>' +
         '  <div class="rpc-info-grid">' +
         '    <div class="rpc-info-item"><dt>RPC ID</dt><dd><span class="badge">' + escapeHtml(rpc.rpc_id) + '</span></dd></div>' +
         '    <div class="rpc-info-item"><dt>Method</dt><dd><span class="badge">' + escapeHtml(rpc.method) + '</span></dd></div>' +
         '    <div class="rpc-info-item"><dt>Status</dt><dd><span class="badge ' + statusClass + '">' + statusSymbol + ' ' + rpc.status + (rpc.error_code !== null ? ' (code: ' + rpc.error_code + ')' : '') + '</span></dd></div>' +
         '    <div class="rpc-info-item"><dt>Latency</dt><dd><span class="badge">' + latency + '</span></dd></div>' +
-        '    <div class="rpc-info-item"><dt>Req Size</dt><dd>' + formatBytes(rpc.request.size) + '</dd></div>' +
-        '    <div class="rpc-info-item"><dt>Res Size</dt><dd>' + formatBytes(rpc.response.size) + '</dd></div>' +
+        '    <div class="rpc-info-item"><dt>Request</dt><dd>' + escapeHtml(rpc.request_ts) + '</dd></div>' +
+        '    <div class="rpc-info-item"><dt>Response</dt><dd>' + escapeHtml(rpc.response_ts || '-') + '</dd></div>' +
         '  </div>' +
         '</div>' +
         '<div class="detail-section">' +
@@ -1715,16 +1941,46 @@ function getConnectorReportScript() {
       });
     });
 
-    // Keyboard navigation
+    // Keyboard navigation (handles both RPC and Events views)
     document.addEventListener('keydown', (e) => {
       if (!currentSessionId) return;
+      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
 
-      const report = sessionReports[currentSessionId];
-      if (!report) return;
+      e.preventDefault();
+      const sessionContent = document.querySelector('.session-content[data-session-id="' + currentSessionId + '"]');
+      if (!sessionContent) return;
 
-      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-        e.preventDefault();
+      // Check which view is active
+      if (currentViewMode === 'events') {
+        // Events navigation
+        const eventRows = sessionContent.querySelectorAll('.event-row');
+        if (eventRows.length === 0) return;
+
+        let newIdx = currentEventIdx;
+        if (currentEventIdx === null) {
+          newIdx = 0;
+        } else if (e.key === 'ArrowDown' && currentEventIdx < eventRows.length - 1) {
+          newIdx = currentEventIdx + 1;
+        } else if (e.key === 'ArrowUp' && currentEventIdx > 0) {
+          newIdx = currentEventIdx - 1;
+        }
+
+        if (newIdx !== currentEventIdx) {
+          currentEventIdx = newIdx;
+          // Update selection visually
+          eventRows.forEach((r, i) => r.classList.toggle('selected', i === newIdx));
+          // Scroll into view
+          eventRows[newIdx].scrollIntoView({ block: 'nearest' });
+          // Trigger click to show detail (if has payload)
+          eventRows[newIdx].click();
+        }
+      } else {
+        // RPC navigation
+        const report = sessionReports[currentSessionId];
+        if (!report) return;
         const rpcs = report.rpcs;
+        if (rpcs.length === 0) return;
+
         if (currentRpcIdx === null && rpcs.length > 0) {
           showRpcDetail(currentSessionId, 0);
           return;
@@ -1735,11 +1991,8 @@ function getConnectorReportScript() {
           showRpcDetail(currentSessionId, currentRpcIdx - 1);
         }
         // Scroll selected row into view
-        const sessionContent = document.querySelector('.session-content[data-session-id="' + currentSessionId + '"]');
-        if (sessionContent) {
-          const row = sessionContent.querySelector('.rpc-row.selected');
-          if (row) row.scrollIntoView({ block: 'nearest' });
-        }
+        const row = sessionContent.querySelector('.rpc-row.selected');
+        if (row) row.scrollIntoView({ block: 'nearest' });
       }
     });
 
@@ -1806,6 +2059,225 @@ function getConnectorReportScript() {
       showSession(sessions[0].session_id);
     }
 
+    // Events View toggle and data loading (Issue #59)
+    (function() {
+      // Cache for loaded events
+      const eventsCache = {};
+
+      // Event kind display labels
+      const kindLabels = {
+        request: 'REQ',
+        response: 'RES',
+        notification: 'NOTIF',
+        transport_event: 'TRANS'
+      };
+
+      // Format time for events table
+      function formatEventTime(ts) {
+        try {
+          const date = new Date(ts);
+          return date.toISOString().split('T')[1].slice(0, 12);
+        } catch {
+          return ts;
+        }
+      }
+
+      // Render events table
+      function renderEventsTable(events) {
+        if (!events || events.length === 0) {
+          return '<div class="events-loading">No events in this session</div>';
+        }
+
+        const rows = events.map(function(event, idx) {
+          const dirClass = event.direction === 'client_to_server' ? 'outgoing' : 'incoming';
+          // Large arrows with tooltip: ⇨ (blue) = Client→Server, ⇦ (green) = Server→Client
+          const dirArrow = event.direction === 'client_to_server' ? '\\u21E8' : '\\u21E6';
+          const dirTooltip = event.direction === 'client_to_server'
+            ? 'Client \\u2192 Server'
+            : 'Server \\u2192 Client';
+          const kindClass = 'badge-kind-' + event.kind;
+          const kindLabel = kindLabels[event.kind] || event.kind;
+          // Method/Summary fallback: method > summary > payload_type (e.g., "connected")
+          const method = event.method || event.summary || event.payload_type || '';
+          const timeStr = formatEventTime(event.ts);
+          const hasPayload = event.has_payload ? '\\u2713' : '';
+
+          return '<tr class="event-row" data-event-idx="' + idx + '" data-event-id="' + escapeHtml(event.event_id) + '">' +
+            '<td>' + timeStr + '</td>' +
+            '<td><span class="direction-arrow ' + dirClass + '" title="' + dirTooltip + '">' + dirArrow + '</span></td>' +
+            '<td><span class="badge ' + kindClass + '">' + kindLabel + '</span></td>' +
+            '<td>' + escapeHtml(method) + '</td>' +
+            '<td>' + hasPayload + '</td>' +
+            '</tr>';
+        }).join('');
+
+        return '<table class="events-table">' +
+          '<thead><tr>' +
+            '<th>Time</th>' +
+            '<th>Dir</th>' +
+            '<th>Kind</th>' +
+            '<th>Method/Summary</th>' +
+            '<th>Data</th>' +
+          '</tr></thead>' +
+          '<tbody>' + rows + '</tbody>' +
+          '</table>';
+      }
+
+      // Load events for a session
+      function loadEvents(sessionId, eventsList) {
+        if (eventsCache[sessionId]) {
+          eventsList.innerHTML = renderEventsTable(eventsCache[sessionId]);
+          // Attach click handlers even when using cached data
+          attachEventRowHandlers(eventsList, sessionId, eventsCache[sessionId]);
+          return;
+        }
+
+        // Check if we're in offline mode (static HTML) or live server
+        // Try to fetch from API, fallback to "no data" message
+        eventsList.innerHTML = '<div class="events-loading">Loading events...</div>';
+
+        fetch('/api/sessions/' + encodeURIComponent(sessionId) + '/events')
+          .then(function(res) {
+            if (!res.ok) throw new Error('API not available');
+            return res.json();
+          })
+          .then(function(data) {
+            eventsCache[sessionId] = data.events;
+            eventsList.innerHTML = renderEventsTable(data.events);
+            // Attach click handlers for event rows
+            attachEventRowHandlers(eventsList, sessionId, data.events);
+          })
+          .catch(function() {
+            eventsList.innerHTML = '<div class="events-loading">Events data not available (API offline)</div>';
+          });
+      }
+
+      // Attach click handlers for event rows
+      function attachEventRowHandlers(eventsList, sessionId, events) {
+        eventsList.querySelectorAll('.event-row').forEach(function(row) {
+          row.addEventListener('click', function() {
+            const idx = parseInt(row.dataset.eventIdx);
+            const event = events[idx];
+            if (!event || !event.has_payload) return;
+
+            // Clear previous selection
+            eventsList.querySelectorAll('.event-row').forEach(function(r) {
+              r.classList.remove('selected');
+            });
+            row.classList.add('selected');
+
+            // Show event detail in right pane
+            showEventDetail(sessionId, event);
+          });
+        });
+      }
+
+      // Show event detail in right pane (2-column layout like RPC Inspector)
+      function showEventDetail(sessionId, event) {
+        const sessionContent = document.querySelector('.session-content[data-session-id="' + sessionId + '"]');
+        if (!sessionContent) return;
+
+        const rightPane = sessionContent.querySelector('.right-pane');
+        if (!rightPane) return;
+
+        // Fetch full event detail
+        fetch('/api/events/' + encodeURIComponent(event.event_id))
+          .then(function(res) {
+            if (!res.ok) throw new Error('Event not found');
+            return res.json();
+          })
+          .then(function(data) {
+            const evt = data.event;
+            const kindClass = 'badge-kind-' + evt.kind;
+            const dirClass = evt.direction === 'client_to_server' ? 'outgoing' : 'incoming';
+            // Large arrows with tooltip: ⇨ (blue) = Client→Server, ⇦ (green) = Server→Client
+            const dirArrow = evt.direction === 'client_to_server' ? '\\u21E8' : '\\u21E6';
+            const dirTooltip = evt.direction === 'client_to_server'
+              ? 'Client \\u2192 Server'
+              : 'Server \\u2192 Client';
+            const method = evt.method || evt.summary || '(unknown)';
+            const rawJson = evt.raw_json ? JSON.parse(evt.raw_json) : null;
+            const formattedJson = rawJson ? JSON.stringify(rawJson, null, 2) : '(no data)';
+
+            // Build summary section
+            var summaryHtml = '<div class="summary-row summary-header">Event Info</div>';
+            summaryHtml += '<div class="summary-row summary-property"><span class="summary-prop-name">Kind</span><span class="summary-prop-value"><span class="badge ' + kindClass + '">' + evt.kind + '</span></span></div>';
+            summaryHtml += '<div class="summary-row summary-property"><span class="summary-prop-name">Direction</span><span class="summary-prop-value"><span class="direction-arrow ' + dirClass + '" title="' + dirTooltip + '">' + dirArrow + '</span> ' + dirTooltip + '</span></div>';
+            summaryHtml += '<div class="summary-row summary-property"><span class="summary-prop-name">Method</span><span class="summary-prop-value">' + escapeHtml(method) + '</span></div>';
+            summaryHtml += '<div class="summary-row summary-property"><span class="summary-prop-name">Timestamp</span><span class="summary-prop-value">' + escapeHtml(evt.ts) + '</span></div>';
+            if (evt.seq !== null) {
+              summaryHtml += '<div class="summary-row summary-property"><span class="summary-prop-name">Sequence</span><span class="summary-prop-value">' + evt.seq + '</span></div>';
+            }
+
+            // If JSON has recognizable structure, add more summary
+            if (rawJson) {
+              if (rawJson.method) {
+                summaryHtml += '<div class="summary-row summary-header" style="margin-top: 12px;">JSON-RPC</div>';
+                summaryHtml += '<div class="summary-row summary-property"><span class="summary-prop-name">method</span><span class="summary-prop-value">' + escapeHtml(rawJson.method) + '</span></div>';
+              }
+              if (rawJson.id !== undefined) {
+                summaryHtml += '<div class="summary-row summary-property"><span class="summary-prop-name">id</span><span class="summary-prop-value">' + escapeHtml(String(rawJson.id)) + '</span></div>';
+              }
+              if (rawJson.error) {
+                summaryHtml += '<div class="summary-row summary-property"><span class="summary-prop-name">error</span><span class="summary-prop-value" style="color: var(--accent-red);">' + escapeHtml(JSON.stringify(rawJson.error)) + '</span></div>';
+              }
+            }
+
+            // 2-column layout: Summary (left) + Raw JSON (right)
+            rightPane.innerHTML =
+              '<div class="rpc-inspector">' +
+                '<div class="rpc-inspector-summary" style="flex: 0 0 280px; max-width: 320px;">' +
+                  '<div class="summary-container">' + summaryHtml + '</div>' +
+                '</div>' +
+                '<div class="rpc-inspector-raw" style="flex: 1; min-width: 0;">' +
+                  '<div class="rpc-raw-header">' +
+                    '<span class="rpc-raw-title">Payload</span>' +
+                  '</div>' +
+                  '<div class="rpc-raw-json"><pre><code>' + escapeHtml(formattedJson) + '</code></pre></div>' +
+                '</div>' +
+              '</div>';
+          })
+          .catch(function() {
+            rightPane.innerHTML = '<div class="detail-placeholder">Failed to load event detail</div>';
+          });
+      }
+
+      // Handle view toggle clicks
+      document.querySelectorAll('.view-toggle').forEach(function(toggle) {
+        const sessionContent = toggle.closest('.session-content');
+        if (!sessionContent) return;
+
+        const sessionId = sessionContent.dataset.sessionId;
+        const rpcList = sessionContent.querySelector('.rpc-list');
+        const eventsList = sessionContent.querySelector('.events-list');
+        const buttons = toggle.querySelectorAll('.view-toggle-btn');
+
+        buttons.forEach(function(btn) {
+          btn.addEventListener('click', function() {
+            const view = btn.dataset.view;
+
+            // Update current view mode
+            currentViewMode = view;
+
+            // Update button states
+            buttons.forEach(function(b) {
+              b.classList.toggle('active', b.dataset.view === view);
+            });
+
+            // Toggle lists
+            if (view === 'events') {
+              rpcList.classList.add('hidden');
+              eventsList.classList.add('active');
+              loadEvents(sessionId, eventsList);
+            } else {
+              rpcList.classList.remove('hidden');
+              eventsList.classList.remove('active');
+            }
+          });
+        });
+      });
+    })();
+
     // RPC Inspector script
     ${getRpcInspectorScript()}
   `;
@@ -2187,27 +2659,46 @@ function renderAnalyticsPanel(analytics) {
     </div>`;
 }
 /**
- * Render a session item for the sessions pane
+ * Render a session item for the sessions pane (compact grid view)
  */
 function renderConnectorSessionItem(session) {
-    const timeStr = formatTimestamp(session.started_at).split(' ')[1]?.slice(0, 8) || '-';
-    const dateStr = formatTimestamp(session.started_at).split(' ')[0] || '-';
-    const statusBadge = session.error_count > 0
-        ? '<span class="badge status-ERR">ERR</span>'
-        : '<span class="badge status-OK">OK</span>';
+    // Format timestamp compactly: MM/DD HH:MM
+    const timestamp = formatCompactTimestamp(session.started_at);
+    const latencyStr = session.total_latency_ms !== null
+        ? `${session.total_latency_ms}ms`
+        : '-';
     return `
-    <div class="session-item" data-session-id="${escapeHtml(session.session_id)}">
-      <div class="session-item-header">
-        <span class="session-id">[${escapeHtml(session.short_id)}]</span>
-        ${statusBadge}
-      </div>
-      <div class="session-meta">${dateStr} ${timeStr}</div>
-      <div class="session-stats">
-        <span>${session.rpc_count} RPCs</span>
-        ${session.error_count > 0 ? `<span style="color: var(--status-err)">${session.error_count} errors</span>` : ''}
-      </div>
+    <div class="session-item"
+         data-session-id="${escapeHtml(session.session_id)}"
+         title="Session: ${session.session_id}&#10;Started: ${session.started_at}&#10;RPCs: ${session.rpc_count}&#10;Events: ${session.event_count}&#10;Errors: ${session.error_count}">
+      <span class="session-id">[${escapeHtml(session.short_id)}]</span>
+      <span class="session-timestamp">${timestamp}</span>
+      <span class="session-counts"><span>R:${session.rpc_count}</span><span>E:${session.event_count}</span></span>
+      <span class="session-latency">${latencyStr}</span>
+      <span class="session-extra"></span>
     </div>`;
 }
+/**
+ * Format timestamp compactly for grid display (UTC)
+ * Returns format: HH:MM:SS.mmm (time with milliseconds)
+ * @public - exported for testing
+ */
+export function formatCompactTimestamp(isoStr) {
+    try {
+        const date = new Date(isoStr);
+        if (isNaN(date.getTime())) {
+            return '-';
+        }
+        const hours = String(date.getUTCHours()).padStart(2, '0');
+        const minutes = String(date.getUTCMinutes()).padStart(2, '0');
+        const seconds = String(date.getUTCSeconds()).padStart(2, '0');
+        const millis = String(date.getUTCMilliseconds()).padStart(3, '0');
+        return `${hours}:${minutes}:${seconds}.${millis}`;
+    }
+    catch {
+        return '-';
+    }
+}
 /**
  * Render session detail content (reuses session HTML layout)
  */
@@ -2254,6 +2745,14 @@ function renderSessionDetailContent(sessionId, report) {
               <dd><span class="badge">${totalLatencyDisplay}</span></dd>
             </dl>
           </div>
+          <div class="view-toggle">
+            <button class="view-toggle-btn active" data-view="rpc">
+              RPCs<span class="view-toggle-count">(${session.rpc_count})</span>
+            </button>
+            <button class="view-toggle-btn" data-view="events">
+              Events<span class="view-toggle-count">(${session.event_count})</span>
+            </button>
+          </div>
           <div class="rpc-list">
             <table class="rpc-table">
               <thead>
@@ -2270,6 +2769,9 @@ ${rpcRows}
               </tbody>
             </table>
           </div>
+          <div class="events-list">
+            <div class="events-loading">Loading events...</div>
+          </div>
         </div>
         <div class="resize-handle"></div>
         <div class="right-pane">
@@ -2345,12 +2847,18 @@ export function generateConnectorHtml(report) {
             rpcs: sessionReport.rpcs.map((rpc) => {
                 const requestSummaryRows = renderRequestSummary(rpc.method, rpc.request.json);
                 const responseSummaryRows = renderResponseSummary(rpc.method, rpc.response.json);
+                // Detect sensitive keys in request/response (Phase 12.x-c)
+                const reqSensitiveKeys = detectSensitiveKeys(rpc.request.json);
+                const resSensitiveKeys = detectSensitiveKeys(rpc.response.json);
+                const hasSensitive = reqSensitiveKeys.length > 0 || resSensitiveKeys.length > 0;
                 return {
                     ...rpc,
                     _requestSummaryHtml: renderSummaryRowsHtml(requestSummaryRows),
                     _responseSummaryHtml: renderSummaryRowsHtml(responseSummaryRows),
                     _requestRawHtml: renderJsonWithPaths(rpc.request.json, '#'),
                     _responseRawHtml: renderJsonWithPaths(rpc.response.json, '#'),
+                    _hasSensitive: hasSensitive,
+                    _sensitiveKeys: [...reqSensitiveKeys, ...resSensitiveKeys],
                 };
             }),
         };
@@ -2422,6 +2930,12 @@ export function generateConnectorHtml(report) {
         <h2>Sessions</h2>
         <span class="pagination-info">${paginationInfo}</span>
       </div>
+      <div class="sessions-header-row">
+        <span>ID</span>
+        <span>Time (UTC)</span>
+        <span style="text-align:right">Latency</span>
+        <span></span>
+      </div>
       <div class="sessions-list">
 ${sessionItems}
       </div>