npm - spider-watch - Versions diffs - 0.1.0 - Mend

spider-watch 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (67) hide show

package/README.md +274 -0
package/dist/config/defaults.d.ts +5 -0
package/dist/config/defaults.d.ts.map +1 -0
package/dist/config/defaults.js +70 -0
package/dist/config/env-loader.d.ts +3 -0
package/dist/config/env-loader.d.ts.map +1 -0
package/dist/config/env-loader.js +29 -0
package/dist/config/validate.d.ts +3 -0
package/dist/config/validate.d.ts.map +1 -0
package/dist/config/validate.js +19 -0
package/dist/create-monitoring.d.ts +3 -0
package/dist/create-monitoring.d.ts.map +1 -0
package/dist/create-monitoring.js +73 -0
package/dist/index.d.ts +4 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +2 -0
package/dist/middleware/auth-basic.d.ts +4 -0
package/dist/middleware/auth-basic.d.ts.map +1 -0
package/dist/middleware/auth-basic.js +34 -0
package/dist/middleware/capture.d.ts +7 -0
package/dist/middleware/capture.d.ts.map +1 -0
package/dist/middleware/capture.js +68 -0
package/dist/middleware/error.d.ts +4 -0
package/dist/middleware/error.d.ts.map +1 -0
package/dist/middleware/error.js +27 -0
package/dist/repository/monitoring-repository.d.ts +4 -0
package/dist/repository/monitoring-repository.d.ts.map +1 -0
package/dist/repository/monitoring-repository.js +239 -0
package/dist/repository/sqlite-db.d.ts +7 -0
package/dist/repository/sqlite-db.d.ts.map +1 -0
package/dist/repository/sqlite-db.js +91 -0
package/dist/router/async-handler.d.ts +3 -0
package/dist/router/async-handler.d.ts.map +1 -0
package/dist/router/async-handler.js +5 -0
package/dist/router/monitoring-router.d.ts +4 -0
package/dist/router/monitoring-router.d.ts.map +1 -0
package/dist/router/monitoring-router.js +109 -0
package/dist/services/console-hook.d.ts +12 -0
package/dist/services/console-hook.d.ts.map +1 -0
package/dist/services/console-hook.js +61 -0
package/dist/services/context.d.ts +7 -0
package/dist/services/context.d.ts.map +1 -0
package/dist/services/context.js +22 -0
package/dist/services/http-client.d.ts +7 -0
package/dist/services/http-client.d.ts.map +1 -0
package/dist/services/http-client.js +56 -0
package/dist/services/instrumentation.d.ts +8 -0
package/dist/services/instrumentation.d.ts.map +1 -0
package/dist/services/instrumentation.js +9 -0
package/dist/services/recorder.d.ts +5 -0
package/dist/services/recorder.d.ts.map +1 -0
package/dist/services/recorder.js +23 -0
package/dist/services/retention.d.ts +12 -0
package/dist/services/retention.d.ts.map +1 -0
package/dist/services/retention.js +36 -0
package/dist/services/runtime.d.ts +3 -0
package/dist/services/runtime.d.ts.map +1 -0
package/dist/services/runtime.js +9 -0
package/dist/types.d.ts +133 -0
package/dist/types.d.ts.map +1 -0
package/dist/types.js +1 -0
package/dist/ui/app.js +382 -0
package/dist/ui/index.html +610 -0
package/dist/utils/masking.d.ts +7 -0
package/dist/utils/masking.d.ts.map +1 -0
package/dist/utils/masking.js +79 -0
package/package.json +71 -0

package/dist/ui/index.html ADDED Viewed

@@ -0,0 +1,610 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Monitoring Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            fontFamily: { mono: ["ui-monospace", "SFMono-Regular", "monospace"] },
+          },
+        },
+      };
+    </script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <style>
+      [x-cloak] {
+        display: none !important;
+      }
+      .scroll-x {
+        overflow-x: auto;
+      }
+      pre {
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+      html:not(.dark) body {
+        background-color: #f3f4f6;
+        color: #111827;
+      }
+      html:not(.dark) .bg-gray-950,
+      html:not(.dark) .bg-gray-900 {
+        background-color: #ffffff !important;
+      }
+      html:not(.dark) .bg-gray-800 {
+        background-color: #f3f4f6 !important;
+      }
+      html:not(.dark) .border-gray-800,
+      html:not(.dark) .border-gray-700 {
+        border-color: #e5e7eb !important;
+      }
+      html:not(.dark) .text-gray-100,
+      html:not(.dark) .text-white,
+      html:not(.dark) .text-gray-200,
+      html:not(.dark) .text-gray-300,
+      html:not(.dark) .text-gray-400,
+      html:not(.dark) .text-gray-500 {
+        color: #1f2937 !important;
+      }
+    </style>
+  </head>
+  <body
+    class="bg-gray-950 text-gray-100 min-h-screen font-sans"
+    x-data="monitoringApp()"
+    x-init="init()"
+    x-cloak
+  >
+    <div
+      x-show="feedback.visible"
+      class="fixed right-4 top-4 z-50 px-4 py-2 rounded-md shadow-lg text-sm"
+      :class="toastClass()"
+      x-text="feedback.message"
+    ></div>
+    <!-- Header -->
+    <header
+      class="bg-gray-900 border-b border-gray-800 px-6 py-4 flex items-center justify-between"
+    >
+      <div class="flex items-center gap-3">
+        <span class="text-2xl">📡</span>
+        <h1 class="text-lg font-semibold text-white">Spider Watch</h1>
+      </div>
+      <div class="flex items-center gap-3">
+        <span
+          class="text-xs text-gray-500"
+          x-text="lastRefreshed ? 'Last refresh: ' + lastRefreshed : ''"
+        ></span>
+        <button
+          @click="toggleThemeMode()"
+          class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1.5 rounded-md transition"
+          x-text="isDarkMode ? '☀' : '🌙'"
+        ></button>
+        <button
+          @click="toggleAutoRefresh()"
+          class="text-xs px-3 py-1.5 rounded-md transition"
+          :class="refreshState.enabled ? 'bg-green-700 hover:bg-green-600 text-white' : 'bg-gray-700 hover:bg-gray-600 text-white'"
+          x-text="refreshState.enabled ? 'Auto-refresh' : 'Auto-refresh'"
+        ></button>
+        <button
+          @click="loadEvents()"
+          class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1.5 rounded-md transition"
+        >
+          ⟳ Refresh
+        </button>
+        <button
+          @click="openDeleteConfirmation()"
+          class="text-xs bg-red-700 hover:bg-red-600 px-3 py-1.5 rounded-md transition text-white"
+        >
+          🗑 Delete data
+        </button>
+      </div>
+    </header>
+    <div class="flex h-[calc(100vh-65px)]">
+      <!-- Left pane: list -->
+      <div class="flex flex-col w-full" :class="selectedEvent ? 'lg:w-1/2' : 'w-full'">
+        <!-- Filters bar -->
+        <div
+          class="bg-gray-900 border-b border-gray-800 px-4 py-3 flex flex-wrap gap-2 items-center"
+        >
+          <input
+            type="text"
+            placeholder="Search (path, IP, correlationId…)"
+            x-model="filters.q"
+            @input.debounce.400ms="filters.page = 1; loadEvents()"
+            class="bg-gray-800 border border-gray-700 rounded px-3 py-1.5 text-sm flex-1 min-w-48 placeholder-gray-500 focus:outline-none focus:border-blue-500"
+          />
+          <select
+            x-model="filters.type"
+            @change="filters.page = 1; loadEvents()"
+            class="bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-blue-500"
+          >
+            <option value="">All types</option>
+            <option value="REQUEST">REQUEST</option>
+            <option value="EXCEPTION">EXCEPTION</option>
+            <option value="EXTERNAL_HTTP">EXTERNAL_HTTP</option>
+            <option value="LOG">LOG</option>
+            <option value="SCHEDULED_TASK">SCHEDULED_TASK</option>
+            <option value="DB_QUERY">DB_QUERY</option>
+            <option value="JOB">JOB</option>
+            <option value="NOTIFICATION">NOTIFICATION</option>
+            <option value="MAIL">MAIL</option>
+            <option value="CACHE_OP">CACHE_OP</option>
+          </select>
+          <select
+            x-model="filters.method"
+            @change="filters.page = 1; loadEvents()"
+            class="bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-blue-500"
+          >
+            <option value="">All methods</option>
+            <option>GET</option>
+            <option>POST</option>
+            <option>PUT</option>
+            <option>PATCH</option>
+            <option>DELETE</option>
+          </select>
+          <select
+            x-model="filters.status"
+            @change="filters.page = 1; loadEvents()"
+            class="bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-blue-500"
+          >
+            <option value="">All statuses</option>
+            <option value="success">Success</option>
+            <option value="error">Error</option>
+          </select>
+          <input
+            type="datetime-local"
+            x-model="filters.from"
+            @change="filters.page = 1; loadEvents()"
+            class="bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-blue-500"
+          />
+          <input
+            type="datetime-local"
+            x-model="filters.to"
+            @change="filters.page = 1; loadEvents()"
+            class="bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-blue-500"
+          />
+          <button
+            @click="clearFilters()"
+            class="text-xs text-gray-400 hover:text-white px-2 py-1.5"
+          >
+            ✕ Clear
+          </button>
+        </div>
+        <!-- Stats bar -->
+        <div
+          class="bg-gray-900 border-b border-gray-800 px-4 py-2 flex items-center gap-4 text-xs text-gray-400"
+        >
+          <span x-show="!loading && total !== null" x-text="total + ' event(s)'"></span>
+          <span x-show="loading" class="animate-pulse">Loading…</span>
+          <span x-show="error" class="text-red-400" x-text="error"></span>
+        </div>
+        <!-- Table -->
+        <div class="flex-1 overflow-y-auto scroll-x">
+          <!-- Loading state -->
+          <div x-show="loading" class="flex items-center justify-center h-32 text-gray-500">
+            <span class="animate-spin mr-2">⟳</span> Loading events…
+          </div>
+          <!-- Error state -->
+          <div
+            x-show="!loading && error"
+            class="flex items-center justify-center h-32 text-red-400 flex-col gap-2"
+          >
+            <span class="text-2xl">⚠️</span>
+            <span x-text="error"></span>
+            <button
+              @click="loadEvents()"
+              class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1.5 rounded"
+            >
+              Retry
+            </button>
+          </div>
+          <!-- Empty state -->
+          <div
+            x-show="!loading && !error && events.length === 0"
+            class="flex items-center justify-center h-32 text-gray-500 flex-col gap-2"
+          >
+            <span class="text-2xl">📭</span>
+            <span>No events found. Try adjusting the filters.</span>
+          </div>
+          <!-- Event table -->
+          <table x-show="!loading && !error && events.length > 0" class="w-full text-xs">
+            <thead class="bg-gray-900 sticky top-0">
+              <tr class="text-left text-gray-400 border-b border-gray-800">
+                <th class="px-3 py-2 font-medium">Timestamp</th>
+                <th class="px-3 py-2 font-medium">Type</th>
+                <th
+                  class="px-3 py-2 font-medium"
+                  x-show="!filters.type || filters.type === 'REQUEST' || filters.type === 'EXTERNAL_HTTP'"
+                >
+                  Method
+                </th>
+                <th
+                  class="px-3 py-2 font-medium"
+                  x-show="!filters.type || filters.type === 'REQUEST' || filters.type === 'EXTERNAL_HTTP'"
+                >
+                  Status
+                </th>
+                <th class="px-3 py-2 font-medium">Summary / Path</th>
+                <th class="px-3 py-2 font-medium">Duration</th>
+                <th
+                  class="px-3 py-2 font-medium"
+                  x-show="!filters.type || filters.type === 'REQUEST'"
+                >
+                  IP
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <template x-for="ev in events" :key="ev.id">
+                <tr
+                  @click="selectEvent(ev)"
+                  class="border-b border-gray-800 cursor-pointer hover:bg-gray-800/60 transition"
+                  :class="selectedEvent && selectedEvent.id === ev.id ? 'bg-gray-800' : ''"
+                >
+                  <td
+                    class="px-3 py-2 font-mono text-gray-400 whitespace-nowrap"
+                    x-text="formatTime(ev.timestamp)"
+                  ></td>
+                  <td class="px-3 py-2">
+                    <span
+                      class="px-1.5 py-0.5 rounded text-[10px] font-semibold"
+                      :class="typeColor(ev.eventType)"
+                      x-text="ev.eventType"
+                    ></span>
+                  </td>
+                  <td
+                    class="px-3 py-2 font-mono text-gray-300"
+                    x-show="!filters.type || filters.type === 'REQUEST' || filters.type === 'EXTERNAL_HTTP'"
+                    x-text="ev.method || '-'"
+                  ></td>
+                  <td
+                    class="px-3 py-2"
+                    x-show="!filters.type || filters.type === 'REQUEST' || filters.type === 'EXTERNAL_HTTP'"
+                  >
+                    <span
+                      x-show="ev.statusCode"
+                      class="font-mono"
+                      :class="statusColor(ev.statusCode)"
+                      x-text="ev.statusCode"
+                    ></span>
+                    <span
+                      x-show="!ev.statusCode && ev.severity"
+                      :class="severityColor(ev.severity)"
+                      x-text="ev.severity || '-'"
+                    ></span>
+                  </td>
+                  <td
+                    class="px-3 py-2 text-gray-300 max-w-xs truncate"
+                    x-text="ev.path || ev.summary || '-'"
+                  ></td>
+                  <td
+                    class="px-3 py-2 font-mono text-gray-400"
+                    x-text="ev.durationMs != null ? ev.durationMs + 'ms' : '-'"
+                  ></td>
+                  <td
+                    class="px-3 py-2 font-mono text-gray-500"
+                    x-show="!filters.type || filters.type === 'REQUEST'"
+                    x-text="ev.ipAddress || '-'"
+                  ></td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+        <!-- Pagination -->
+        <div
+          x-show="total > 0"
+          class="bg-gray-900 border-t border-gray-800 px-4 py-2 flex items-center justify-between text-xs text-gray-400"
+        >
+          <div class="flex items-center gap-2">
+            <span>Page</span>
+            <input
+              type="number"
+              x-model.number="filters.page"
+              @change="loadEvents()"
+              min="1"
+              :max="totalPages"
+              class="w-14 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-center focus:outline-none"
+            />
+            <span x-text="'of ' + totalPages"></span>
+          </div>
+          <div class="flex gap-2">
+            <button
+              @click="filters.page = Math.max(1, filters.page - 1); loadEvents()"
+              :disabled="filters.page <= 1"
+              class="px-3 py-1 rounded bg-gray-800 disabled:opacity-40 hover:bg-gray-700"
+            >
+              ← Prev
+            </button>
+            <button
+              @click="filters.page = Math.min(totalPages, filters.page + 1); loadEvents()"
+              :disabled="filters.page >= totalPages"
+              class="px-3 py-1 rounded bg-gray-800 disabled:opacity-40 hover:bg-gray-700"
+            >
+              Next →
+            </button>
+          </div>
+          <div>
+            <select
+              x-model.number="filters.pageSize"
+              @change="filters.page = 1; loadEvents()"
+              class="bg-gray-800 border border-gray-700 rounded px-2 py-1 focus:outline-none"
+            >
+              <option :value="25">25/page</option>
+              <option :value="50">50/page</option>
+              <option :value="100">100/page</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <!-- Right pane: detail -->
+      <div
+        x-show="selectedEvent"
+        class="hidden lg:flex flex-col w-1/2 border-l border-gray-800 overflow-y-auto bg-gray-950"
+      >
+        <div
+          class="bg-gray-900 border-b border-gray-800 px-4 py-3 flex items-center justify-between"
+        >
+          <h2 class="text-sm font-semibold">Event Detail</h2>
+          <button
+            @click="selectedEvent = null; detail = null"
+            class="text-gray-400 hover:text-white text-lg leading-none"
+          >
+            ✕
+          </button>
+        </div>
+        <!-- Loading detail -->
+        <div x-show="detailLoading" class="flex items-center justify-center h-32 text-gray-500">
+          <span class="animate-spin mr-2">⟳</span> Loading detail…
+        </div>
+        <div x-show="!detailLoading && detail" class="p-4 space-y-4 text-xs">
+          <!-- Event metadata -->
+          <div class="bg-gray-900 rounded-lg p-3 space-y-2">
+            <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Event</h3>
+            <div class="grid grid-cols-2 gap-x-4 gap-y-1">
+              <template x-for="[k,v] in Object.entries(detail.event || {})" :key="k">
+                <template x-if="v !== null && v !== undefined && k !== 'data'">
+                  <div class="contents">
+                    <span class="text-gray-500" x-text="k"></span>
+                    <span
+                      class="font-mono text-gray-200 truncate"
+                      x-text="typeof v === 'object' ? JSON.stringify(v) : v"
+                    ></span>
+                  </div>
+                </template>
+              </template>
+            </div>
+          </div>
+          <!-- Request record -->
+          <div x-show="detail.request" class="bg-gray-900 rounded-lg p-3 space-y-2">
+            <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">
+              Request Record
+            </h3>
+            <div class="grid grid-cols-2 gap-x-4 gap-y-1">
+              <template x-for="[k,v] in Object.entries(detail.request || {})" :key="k">
+                <template
+                  x-if="v !== null && v !== undefined && !['requestHeaders','responseHeaders','requestBody','responseBody'].includes(k)"
+                >
+                  <div class="contents">
+                    <span class="text-gray-500" x-text="k"></span>
+                    <span
+                      class="font-mono text-gray-200"
+                      x-text="typeof v === 'object' ? JSON.stringify(v) : v"
+                    ></span>
+                  </div>
+                </template>
+              </template>
+            </div>
+            <!-- Bodies -->
+            <template x-if="detail.request?.requestBody">
+              <div>
+                <div class="flex items-center justify-between mt-2 mb-1">
+                  <p class="text-gray-500">Request Body</p>
+                  <button
+                    @click="copyJsonValue(detail.request.requestBody, 'Request body')"
+                    class="text-[10px] bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded"
+                  >
+                    Copy
+                  </button>
+                </div>
+                <pre
+                  class="bg-gray-800 rounded p-2 text-green-300 text-[11px] max-h-40 overflow-y-auto"
+                  x-text="prettyJson(detail.request.requestBody)"
+                ></pre>
+              </div>
+            </template>
+            <template x-if="detail.request?.responseBody">
+              <div>
+                <div class="flex items-center justify-between mt-2 mb-1">
+                  <p class="text-gray-500">Response Body</p>
+                  <button
+                    @click="copyJsonValue(detail.request.responseBody, 'Response body')"
+                    class="text-[10px] bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded"
+                  >
+                    Copy
+                  </button>
+                </div>
+                <pre
+                  class="bg-gray-800 rounded p-2 text-blue-300 text-[11px] max-h-40 overflow-y-auto"
+                  x-text="prettyJson(detail.request.responseBody)"
+                ></pre>
+              </div>
+            </template>
+          </div>
+          <!-- Outbound HTTP calls -->
+          <div
+            x-show="detail.externalHttpCalls && detail.externalHttpCalls.length > 0"
+            class="bg-gray-900 rounded-lg p-3 space-y-3"
+          >
+            <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">
+              Outbound HTTP Calls (<span x-text="detail.externalHttpCalls?.length"></span>)
+            </h3>
+            <template x-for="(call, idx) in detail.externalHttpCalls || []" :key="call.eventId">
+              <div class="border border-gray-700 rounded p-2 space-y-1">
+                <div class="flex items-center gap-2">
+                  <span class="font-mono font-semibold text-yellow-300" x-text="call.method"></span>
+                  <span class="font-mono text-gray-300 truncate flex-1" x-text="call.url"></span>
+                  <span
+                    :class="statusColor(call.statusCode)"
+                    class="font-mono font-semibold"
+                    x-text="call.statusCode || 'ERR'"
+                  ></span>
+                  <span
+                    class="text-gray-500"
+                    x-text="call.durationMs != null ? call.durationMs + 'ms' : ''"
+                  ></span>
+                </div>
+                <template x-if="call.requestBody">
+                  <div>
+                    <div class="flex items-center justify-between mt-1 mb-0.5">
+                      <p class="text-gray-500">→ Request</p>
+                      <button
+                        @click="copyJsonValue(call.requestBody, 'Outbound request body')"
+                        class="text-[10px] bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded"
+                      >
+                        Copy
+                      </button>
+                    </div>
+                    <pre
+                      class="bg-gray-800 rounded p-1.5 text-green-300 text-[10px] max-h-24 overflow-y-auto"
+                      x-text="prettyJson(call.requestBody)"
+                    ></pre>
+                  </div>
+                </template>
+                <template x-if="call.responseBody">
+                  <div>
+                    <div class="flex items-center justify-between mt-1 mb-0.5">
+                      <p class="text-gray-500">← Response</p>
+                      <button
+                        @click="copyJsonValue(call.responseBody, 'Outbound response body')"
+                        class="text-[10px] bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded"
+                      >
+                        Copy
+                      </button>
+                    </div>
+                    <pre
+                      class="bg-gray-800 rounded p-1.5 text-blue-300 text-[10px] max-h-24 overflow-y-auto"
+                      x-text="prettyJson(call.responseBody)"
+                    ></pre>
+                  </div>
+                </template>
+              </div>
+            </template>
+          </div>
+          <!-- Exceptions -->
+          <div
+            x-show="detail.exceptions && detail.exceptions.length > 0"
+            class="bg-gray-900 rounded-lg p-3 space-y-2"
+          >
+            <h3 class="text-xs font-semibold text-red-400 uppercase tracking-wider">
+              Exceptions (<span x-text="detail.exceptions?.length"></span>)
+            </h3>
+            <template x-for="exc in detail.exceptions || []" :key="exc.eventId">
+              <div class="border border-red-900 rounded p-2 space-y-1">
+                <p class="font-semibold text-red-300" x-text="exc.name + ': ' + exc.message"></p>
+                <pre
+                  x-show="exc.stackTrace"
+                  class="text-[10px] text-gray-400 max-h-32 overflow-y-auto"
+                  x-text="exc.stackTrace"
+                ></pre>
+              </div>
+            </template>
+          </div>
+          <!-- Exception detail (single) -->
+          <div
+            x-show="detail.exception && !detail.exceptions?.length"
+            class="bg-gray-900 rounded-lg p-3 space-y-2"
+          >
+            <h3 class="text-xs font-semibold text-red-400 uppercase tracking-wider">Exception</h3>
+            <p
+              class="font-semibold text-red-300"
+              x-text="(detail.exception?.name || '') + ': ' + (detail.exception?.message || '')"
+            ></p>
+            <pre
+              x-show="detail.exception?.stackTrace"
+              class="text-[10px] text-gray-400 max-h-32 overflow-y-auto"
+              x-text="detail.exception?.stackTrace"
+            ></pre>
+          </div>
+          <!-- Generic event data -->
+          <template x-if="detail.event?.data">
+            <div class="bg-gray-900 rounded-lg p-3 space-y-2">
+              <div class="flex items-center justify-between">
+                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">
+                  Event Data
+                </h3>
+                <button
+                  @click="copyJsonValue(detail.event.data, 'Event data')"
+                  class="text-[10px] bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded"
+                >
+                  Copy
+                </button>
+              </div>
+              <pre
+                class="bg-gray-800 rounded p-2 text-purple-300 text-[11px] max-h-48 overflow-y-auto"
+                x-text="prettyJson(detail.event.data)"
+              ></pre>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+    <div
+      x-show="deleteState.confirmOpen"
+      class="fixed inset-0 bg-black/60 z-40 flex items-center justify-center p-4"
+      x-cloak
+    >
+      <div class="bg-gray-900 border border-gray-700 rounded-lg p-5 w-full max-w-md space-y-4">
+        <h3 class="text-base font-semibold text-white">Delete monitoring data?</h3>
+        <p class="text-sm text-gray-300">
+          This action will permanently remove recorded monitoring events. It cannot be undone.
+        </p>
+        <div class="flex justify-end gap-2">
+          <button
+            @click="closeDeleteConfirmation()"
+            :disabled="deleteState.inProgress"
+            class="px-3 py-1.5 rounded bg-gray-700 hover:bg-gray-600 text-sm disabled:opacity-60"
+          >
+            Cancel
+          </button>
+          <button
+            @click="deleteRecordedData()"
+            :disabled="deleteState.inProgress"
+            class="px-3 py-1.5 rounded bg-red-700 hover:bg-red-600 text-sm text-white disabled:opacity-60"
+            x-text="deleteState.inProgress ? 'Deleting…' : 'Delete now'"
+          ></button>
+        </div>
+      </div>
+    </div>
+    <script>
+      window.__MONITORING_BASE_PATH = "__MONITORING_BASE_PATH__";
+    </script>
+    <script src="__MONITORING_BASE_PATH__/app.js"></script>
+  </body>
+</html>

package/dist/utils/masking.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { MonitoringMaskingOptions } from "../types.js";
+export declare function createMaskingUtils(masking: MonitoringMaskingOptions): {
+    maskObject: (value: unknown, depth?: number) => unknown;
+    maskBody: (body: unknown) => string | null;
+    maskHeaders: (headers: unknown) => Record<string, unknown>;
+};
+//# sourceMappingURL=masking.d.ts.map

package/dist/utils/masking.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"masking.d.ts","sourceRoot":"","sources":["../../src/utils/masking.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAQ5D,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,wBAAwB;wBAQvC,OAAO,qBAAc,OAAO;qBAqB/B,OAAO,KAAG,MAAM,GAAG,IAAI;2BAiCjB,OAAO,KAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;EAUhE"}