diff --git a/package.json b/package.json index b6a94af..d8ac743 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "dependencies": { "@na-ji/pogo-protos": "^2.131.0", "jquery.json-viewer": "^1.5.0", + "js-yaml": "^4.1.0", "socket.io": "^4.6.2" } } diff --git a/src/index.ts b/src/index.ts index d2bb8ff..45c8dc7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,8 +2,9 @@ import http from "http"; import fs from "fs"; import crypto from "crypto"; import { WebStreamBuffer, getIPAddress, handleData, moduleConfigIsAvailable, redirect_post_golbat } from "./utils"; -import { decodePayload, decodePayloadTraffic } from "./parser/proto-parser"; +import { decodePayload, decodePayloadTraffic, remasterOrCleanMethodString } from "./parser/proto-parser"; import SampleSaver from "./utils/sample-saver"; +import { requestMessagesResponses } from "./constants"; // try looking if config file exists... let config = require("./config/example.config.json"); @@ -127,6 +128,23 @@ const httpServer = http.createServer(function (req, res) { return; } + if (req.url === "/api/methods" && req.method === "GET") { + if (!requireAuth(req, res)) return; + + // Build complete method list from constants + const methodsList = Object.entries(requestMessagesResponses).map(([rawName, tuple]) => ({ + id: String(tuple[0]), // Method ID as string + rawName: rawName, // Original constant name + cleanName: remasterOrCleanMethodString(rawName), // Cleaned display name + hasRequest: tuple[1] !== null, // Has request proto + hasResponse: tuple[2] !== null // Has response proto + })); + + res.writeHead(200, { "Content-Type": "application/json" }); + res.end(JSON.stringify(methodsList)); + return; + } + switch (req.url) { case "/golbat": req.on("data", function (chunk) { diff --git a/src/parser/proto-parser.ts b/src/parser/proto-parser.ts index 054cde8..613e4f5 100644 --- a/src/parser/proto-parser.ts +++ b/src/parser/proto-parser.ts @@ -51,7 +51,7 @@ function DecoderInternalPayloadAsResponse(method: number, data: any): any { return result; } -function remasterOrCleanMethodString(str: string) { +export function remasterOrCleanMethodString(str: string) { return str.replace(/^REQUEST_TYPE_/, '') .replace(/^METHOD_/, '') .replace(/^PLATFORM_/, '') diff --git a/src/views/css/style.css b/src/views/css/style.css index e0100ad..a0560d2 100644 --- a/src/views/css/style.css +++ b/src/views/css/style.css @@ -230,4 +230,240 @@ table tr td.important { font-size: 12px !important; padding: 5px 10px !important; } +} + +/* ========================= + Enhanced Method Filter Panel & Statistics + ========================= */ +#method-filter-wrapper, +#statistics-wrapper { + padding: 0 5px; +} + +.method-filter-panel, +.statistics-panel { + border: 1px solid #ddd; + border-radius: 6px; + background: #fff; + margin-bottom: 10px; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); + height: 100%; +} + +.dark .method-filter-panel, +.dark .statistics-panel { + background: rgba(0, 0, 0, 0.2); + border-color: rgba(255, 255, 255, 0.2); +} + +.filter-header, +.stat-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 12px; + background: #f7f7f7; + border-bottom: 1px solid #ddd; + border-radius: 6px 6px 0 0; + cursor: pointer; + user-select: none; +} + +.dark .filter-header, +.dark .stat-header { + background: rgba(0, 0, 0, 0.3); + border-bottom-color: rgba(255, 255, 255, 0.2); +} + +.filter-toggle, +.stat-toggle { + padding: 2px 8px; + font-size: 12px; + background: transparent; + border: 1px solid #ccc; + border-radius: 4px; + cursor: pointer; + color: var(--black-color); +} + +.dark .filter-toggle, +.dark .stat-toggle { + border-color: rgba(255, 255, 255, 0.3); +} + +.filter-content, +.stat-content { + padding: 10px; +} + +.method-search { + width: 100%; + padding: 6px 10px; + margin-bottom: 8px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 13px; + box-sizing: border-box; +} + +.dark .method-search { + background: rgba(0, 0, 0, 0.2); + border-color: rgba(255, 255, 255, 0.2); + color: var(--black-color); +} + +.method-list { + max-height: 320px; + overflow-y: auto; + margin-top: 6px; +} + +/* Proto Item (Method Filter Checkbox Row) */ +.proto-item { + display: flex; + align-items: center; + gap: 8px; + padding: 6px 8px; + margin-top: 4px; + border: 1px solid #ddd; + border-radius: 6px; + background: #fff; + cursor: pointer; + user-select: none; + transition: all 0.2s ease; +} + +.dark .proto-item { + background: rgba(0, 0, 0, 0.2); + border-color: rgba(255, 255, 255, 0.2); +} + +.proto-item:hover { + background: #f7f7f7; + border-color: #bbb; +} + +.dark .proto-item:hover { + background: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.3); +} + +.proto-item.selected { + background: #eef; + border-color: #99c; +} + +.dark .proto-item.selected { + background: rgba(100, 100, 255, 0.15); + border-color: rgba(100, 100, 255, 0.4); +} + +.proto-item input[type="checkbox"] { + margin: 0 4px 0 2px; + cursor: pointer; +} + +.proto-item .proto-id { + font-weight: 600; + min-width: 56px; + color: var(--important); +} + +.proto-item .proto-name { + flex: 1; + opacity: 0.85; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.proto-item .proto-badge { + margin-left: auto; + min-width: 20px; + padding: 0 6px; + height: 18px; + line-height: 18px; + text-align: center; + border-radius: 9px; + border: 1px solid #e0e0e0; + font-size: 12px; + opacity: 0.75; + background: #f9f9f9; +} + +.dark .proto-item .proto-badge { + background: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.2); +} + +.proto-item.selected .proto-badge { + opacity: 1; + font-weight: 600; +} + +/* Row Highlighting - Disabled Methods */ +#data_socket tbody tr.proto-disabled { + color: #999; + opacity: 0.6; + background: transparent; +} + +.dark #data_socket tbody tr.proto-disabled { + color: #666; +} + +/* Statistics Panel */ +.stat-item { + display: flex; + justify-content: space-between; + padding: 4px 0; + font-size: 13px; +} + +.stat-label { + font-weight: 500; + opacity: 0.8; +} + +.stat-value { + font-weight: 600; + color: var(--important); +} + +/* Mobile Optimization */ +@media (max-width: 768px) { + #method-filter-wrapper, + #statistics-wrapper { + padding: 0; + margin-bottom: 10px; + } + + .method-list { + max-height: 200px; + } + + .proto-item { + font-size: 11px; + padding: 4px 6px; + } + + .proto-item .proto-id { + min-width: 40px; + } + + .proto-item .proto-badge { + font-size: 10px; + padding: 0 4px; + height: 16px; + line-height: 16px; + } + + .method-search { + font-size: 12px; + padding: 5px 8px; + } + + .stat-item { + font-size: 11px; + } } \ No newline at end of file diff --git a/src/views/print-protos.html b/src/views/print-protos.html index 58c926d..4f6d167 100644 --- a/src/views/print-protos.html +++ b/src/views/print-protos.html @@ -32,6 +32,7 @@ type="text/css" rel="stylesheet" /> +
@@ -51,7 +52,7 @@

Filters
-
+
-
-
-
-
- -
- - -
-
- +
+
+
+
+ +
+
+
+ +
+
+ 

+            

+              
+              
+            

             
             
             
@@ -197,11 +196,24 @@ 

           this.responseHtmlElement = null;
           this.responseStatusElement = null;
           this.response = null;
+          this.timestamp = Date.now(); // First-seen timestamp
         }
         setResponse(obj) {
           this.response = obj;
         }
       }
+
+      // =========================
+      // Session Tracking State
+      // =========================
+      const rowFirstSeen = new Map(); // row ID -> first-seen timestamp
+      const methodCounts = new Map(); // method ID -> count (session only)
+      let allowedMethods = new Set(); // Set of allowed method IDs (for filtering)
+      let knownMethods = new Set(); // All discovered methods (persistent)
+      let methodMap = new Map(); // method ID -> method name mapping
+      let isUserTyping = false;
+      let globalIsComposing = false;
+      let showSeenMethodsOnly = false; // Toggle: show all methods vs. seen only
       var STATE = 0;
       setStateOnButtons();
       var incoming = io.connect("/incoming"),
@@ -214,12 +226,38 @@ 

       let messages = [];
       let foundInstances = [];
       let instanceFilter = "";
-      let methodFilterIds = [];
-      let filterMode = "blacklist";
+      let exportFormat = "json"; // Default export format
+      let sessionStartTime = Date.now();
 
-      function downloadJSON(data, filename) {
-        const jsonStr = JSON.stringify(data, null, 2);
-        const blob = new Blob([jsonStr], { type: "application/json" });
+      // =========================
+      // Utility Functions
+      // =========================
+      function sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+      }
+
+      function fmtStamp(ms) {
+        return new Date(ms).toISOString().replace(/[:-]/g, "").slice(0, 15);
+      }
+
+      function downloadFile(data, filename, format = "json") {
+        let content, mimeType;
+        if (format === "yaml") {
+          try {
+            content = jsyaml.dump(data, { noRefs: true });
+            mimeType = "text/yaml;charset=utf-8";
+          } catch (e) {
+            console.error("YAML conversion failed:", e);
+            showToast("YAML export failed, using JSON instead", true);
+            content = JSON.stringify(data, null, 2);
+            mimeType = "application/json";
+            filename = filename.replace(/\.yaml$/, ".json");
+          }
+        } else {
+          content = JSON.stringify(data, null, 2);
+          mimeType = "application/json";
+        }
+        const blob = new Blob([content], { type: mimeType });
         const url = URL.createObjectURL(blob);
         const a = document.createElement("a");
         a.href = url;
@@ -230,6 +268,10 @@ 

         URL.revokeObjectURL(url);
       }
 
+      function downloadJSON(data, filename) {
+        downloadFile(data, filename, "json");
+      }
+
       function showToast(message, isError = false) {
         const bgColor = isError ? '#dc3545' : '#28a745';
         const toast = $(`
${message}
`);
@@ -255,21 +297,31 @@ 

           foundInstances.push(data.identifier);
           appendFoundName(data.identifier);
         }
+
+        // Track methods (only update if not already loaded from server)
+        const methodId = String(data.methodId);
+        if (!methodMap.has(methodId)) {
+          methodMap.set(methodId, data.methodName);
+          knownMethods.add(methodId);
+          saveMethodMap();
+          saveKnownMethods();
+
+          // Auto-check new methods by default
+          if (!allowedMethods.has(methodId)) {
+            allowedMethods.add(methodId);
+            saveAllowedMethods();
+          }
+        }
+
         if (STATE !== 1) {
           return;
         }
         if (instanceFilter !== "" && data.identifier !== instanceFilter) {
           return;
         }
-        if (methodFilterIds.length > 0) {
-          const methodIdNum = parseInt(data.methodId);
-          const isInList = methodFilterIds.indexOf(methodIdNum) !== -1;
-          if (filterMode === "blacklist" && isInList) {
-            return;
-          }
-          if (filterMode === "whitelist" && !isInList) {
-            return;
-          }
+        // Use new allowedMethods set for filtering
+        if (allowedMethods.size > 0 && !allowedMethods.has(methodId)) {
+          return;
         }
         if (typeof data.error !== "undefined") {
           console.error(data.error);
@@ -277,8 +329,17 @@ 

           incomingProtocolId++;
           const message = new IncomingMessage(incomingProtocolId, data);
           messages.push(message);
+
+          // Track first-seen and counts
+          const rowId = String(incomingProtocolId);
+          if (!rowFirstSeen.has(rowId)) {
+            rowFirstSeen.set(rowId, message.timestamp);
+            methodCounts.set(methodId, (methodCounts.get(methodId) || 0) + 1);
+          }
+
           const tr = document.createElement("tr");
           tr.setAttribute("id", message.id);
+          tr.setAttribute("data-method-id", methodId);
 
           const tdInstance = document.createElement("td");
           tdInstance.classList.add("mobile-hide");
@@ -331,8 +392,9 @@ 

           downloadBtn.style.cssText = "padding: 4px; font-size: 14px; border: none; background: transparent; color: #28a745; cursor: pointer;";
           downloadBtn.onclick = function(e) {
             e.stopPropagation(); // Prevent row click
-            const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
-            const filename = `combined_${message.methodName}_${message.methodId}_${timestamp}.json`;
+            const ext = exportFormat === "yaml" ? "yaml" : "json";
+            const timestamp = fmtStamp(message.timestamp);
+            const filename = `${message.methodName}_${timestamp}_${message.id}_combined.${ext}`;
             const combinedData = {
               identifier: message.identifier,
               methodId: message.methodId,
@@ -340,7 +402,7 @@ 

               request: message.data,
               response: message.response ? message.response.data : null
             };
-            downloadJSON(combinedData, filename);
+            downloadFile(combinedData, filename, exportFormat);
           };
           tdDownload.appendChild(downloadBtn);
           tr.appendChild(tdDownload);
@@ -355,18 +417,28 @@ 

           foundInstances.push(data.identifier);
           appendFoundName(data.identifier);
         }
+
+        // Track methods (only update if not already loaded from server)
+        const methodId = String(data.methodId);
+        if (!methodMap.has(methodId)) {
+          methodMap.set(methodId, data.methodName);
+          knownMethods.add(methodId);
+          saveMethodMap();
+          saveKnownMethods();
+
+          // Auto-check new methods by default
+          if (!allowedMethods.has(methodId)) {
+            allowedMethods.add(methodId);
+            saveAllowedMethods();
+          }
+        }
+
         if (STATE !== 1) {
           return;
         }
-        if (methodFilterIds.length > 0) {
-          const methodIdNum = parseInt(data.methodId);
-          const isInList = methodFilterIds.indexOf(methodIdNum) !== -1;
-          if (filterMode === "blacklist" && isInList) {
-            return;
-          }
-          if (filterMode === "whitelist" && !isInList) {
-            return;
-          }
+        // Use new allowedMethods set for filtering
+        if (allowedMethods.size > 0 && !allowedMethods.has(methodId)) {
+          return;
         }
         if (instanceFilter !== "" && data.identifier !== instanceFilter) {
           return;
@@ -415,24 +487,30 @@ 

           .jsonViewer(message.response.data);
         $("#modal-detail").modal();
       });
-      $("#download-incoming-json").click(function () {
+      $("#download-incoming").click(function () {
         if (!currentModalMessage) return;
-        const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
-        const filename = `request_${currentModalMessage.methodName}_${currentModalMessage.methodId}_${timestamp}.json`;
-        downloadJSON(currentModalMessage.data, filename);
+        const format = $("#export-format-modal").val() || exportFormat;
+        const ext = format === "yaml" ? "yaml" : "json";
+        const timestamp = fmtStamp(currentModalMessage.timestamp);
+        const filename = `${currentModalMessage.methodName}_${timestamp}_${currentModalMessage.id}_req.${ext}`;
+        downloadFile(currentModalMessage.data, filename, format);
       });
 
-      $("#download-outgoing-json").click(function () {
+      $("#download-outgoing").click(function () {
         if (!currentModalMessage || !currentModalMessage.response) return;
-        const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
-        const filename = `response_${currentModalMessage.methodName}_${currentModalMessage.methodId}_${timestamp}.json`;
-        downloadJSON(currentModalMessage.response.data, filename);
+        const format = $("#export-format-modal").val() || exportFormat;
+        const ext = format === "yaml" ? "yaml" : "json";
+        const timestamp = fmtStamp(currentModalMessage.timestamp);
+        const filename = `${currentModalMessage.methodName}_${timestamp}_${currentModalMessage.id}_resp.${ext}`;
+        downloadFile(currentModalMessage.response.data, filename, format);
       });
 
-      $("#download-combined-json").click(function () {
+      $("#download-combined").click(function () {
         if (!currentModalMessage) return;
-        const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
-        const filename = `combined_${currentModalMessage.methodName}_${currentModalMessage.methodId}_${timestamp}.json`;
+        const format = $("#export-format-modal").val() || exportFormat;
+        const ext = format === "yaml" ? "yaml" : "json";
+        const timestamp = fmtStamp(currentModalMessage.timestamp);
+        const filename = `${currentModalMessage.methodName}_${timestamp}_${currentModalMessage.id}_combined.${ext}`;
         const combinedData = {
           identifier: currentModalMessage.identifier,
           methodId: currentModalMessage.methodId,
@@ -440,7 +518,7 @@ 

           request: currentModalMessage.data,
           response: currentModalMessage.response ? currentModalMessage.response.data : null
         };
-        downloadJSON(combinedData, filename);
+        downloadFile(combinedData, filename, format);
       });
 
       $(document).on('click', '.method-data-incoming', function(e) {
@@ -588,20 +666,10 @@ 

         instanceFilter = $(this).val();
         storeSettings();
       });
-      $("#method-filter-ids").keyup(function () {
-        methodFilterIds =
-          $(this).val() === ""
-            ? []
-            : $(this)
-                .val()
-                .split(",")
-                .map((x) => parseInt(x));
-        storeSettings();
-      });
 
-      $("#filter-mode").change(function () {
-        filterMode = $(this).val();
-        clearTable();
+      // Export format modal selector
+      $("#export-format-modal").change(function () {
+        exportFormat = $(this).val();
         storeSettings();
       });
       $("#maxlogs").on("change", function () {
@@ -619,33 +687,116 @@ 

         let settingsJson = localStorage.getItem("settings");
         if (settingsJson !== null) {
           const settings = JSON.parse(settingsJson);
-          (STATE = parseInt(settings["STATE"])),
-            (instanceFilter = settings["instanceFilter"]);
-          // Handle legacy blacklist settings
-          if (settings["incomingBlacklistIds"]) {
-            methodFilterIds = settings["incomingBlacklistIds"];
-          } else if (settings["methodFilterIds"]) {
-            methodFilterIds = settings["methodFilterIds"];
-          }
-          if (settings["filterMode"]) {
-            filterMode = settings["filterMode"];
-          }
-          if (settings["maxLogs"] != null && !isNaN(parseInt(maxLogs))) {
+          STATE = parseInt(settings["STATE"] || 0);
+          instanceFilter = settings["instanceFilter"] || "";
+
+          if (settings["maxLogs"] != null && !isNaN(parseInt(settings["maxLogs"]))) {
             setLogValue(parseInt(settings["maxLogs"]));
           }
           if(settings["darkMode"] != null && JSON.parse(settings["darkMode"])) {
             darkMode = true;
             document.body.classList.add("dark");
           }
+          if (settings["exportFormat"]) {
+            exportFormat = settings["exportFormat"];
+            $("#export-format-modal").val(exportFormat);
+          }
+          if (settings["showSeenMethodsOnly"] != null) {
+            showSeenMethodsOnly = settings["showSeenMethodsOnly"];
+          }
+
           if (STATE === 1) {
             $("#play-button").click();
           }
           $("#instance-filter").val(instanceFilter);
-          $("#method-filter-ids").val(methodFilterIds.join(","));
-          $("#filter-mode").val(filterMode);
         }
         $("#maxlogs").val(maxLogs);
       }
+
+      // Load persistent method tracking data
+      function loadAllowedMethods() {
+        try {
+          const data = JSON.parse(localStorage.getItem("allowedMethods") || "[]");
+          return new Set(data.map(String));
+        } catch {
+          return new Set();
+        }
+      }
+
+      function saveAllowedMethods() {
+        localStorage.setItem("allowedMethods", JSON.stringify([...allowedMethods]));
+      }
+
+      function loadKnownMethods() {
+        try {
+          const data = JSON.parse(localStorage.getItem("knownMethods") || "[]");
+          return new Set(data.map(String));
+        } catch {
+          return new Set();
+        }
+      }
+
+      function saveKnownMethods() {
+        localStorage.setItem("knownMethods", JSON.stringify([...knownMethods]));
+      }
+
+      function loadMethodMap() {
+        try {
+          const data = JSON.parse(localStorage.getItem("methodMap") || "{}");
+          return new Map(Object.entries(data));
+        } catch {
+          return new Map();
+        }
+      }
+
+      function saveMethodMap() {
+        localStorage.setItem("methodMap", JSON.stringify(Object.fromEntries(methodMap)));
+      }
+
+      // =========================
+      // Load Complete Method List from Server
+      // =========================
+      async function loadAllMethodsFromServer() {
+        try {
+          const response = await fetch('/api/methods');
+          if (!response.ok) throw new Error('Failed to fetch methods');
+
+          const allMethods = await response.json();
+
+          console.log(`📋 Loaded ${allMethods.length} methods from server`);
+
+          // Populate methodMap with all available methods
+          allMethods.forEach(method => {
+            methodMap.set(method.id, method.cleanName);
+            knownMethods.add(method.id);
+
+            // Auto-check all methods by default
+            if (!allowedMethods.has(method.id)) {
+              allowedMethods.add(method.id);
+            }
+          });
+
+          // Save to localStorage
+          saveMethodMap();
+          saveKnownMethods();
+          saveAllowedMethods();
+
+          // Refresh UI
+          renderMethodFilterPanel();
+
+          return true;
+        } catch (error) {
+          console.error('❌ Failed to load methods from server:', error);
+          showToast('Failed to load complete method list', true);
+          return false;
+        }
+      }
+
+      // Initialize from localStorage
+      allowedMethods = loadAllowedMethods();
+      knownMethods = loadKnownMethods();
+      methodMap = loadMethodMap();
+
       loadSettings();
 
       // Check if authentication is enabled and show logout button
@@ -666,13 +817,339 @@ 

           JSON.stringify({
             STATE: STATE,
             instanceFilter: instanceFilter,
-            methodFilterIds: methodFilterIds,
-            filterMode: filterMode,
             maxLogs: maxLogs,
-            darkMode: darkMode
+            darkMode: darkMode,
+            exportFormat: exportFormat,
+            showSeenMethodsOnly: showSeenMethodsOnly
           })
         );
       }
+
+      // =========================
+      // Input Detection (Smart UI Updates)
+      // =========================
+      function isEditableTarget(el) {
+        if (!el) return false;
+        const tag = el.tagName;
+        if (tag === "TEXTAREA") return true;
+        if (tag === "INPUT") {
+          const t = (el.type || "text").toLowerCase();
+          return ["text", "search", "email", "url", "tel", "password", "number", ""].includes(t);
+        }
+        return !!el.isContentEditable;
+      }
+
+      function checkUserTyping() {
+        const ae = document.activeElement;
+        return globalIsComposing || isEditableTarget(ae);
+      }
+
+      document.addEventListener("compositionstart", (e) => {
+        if (isEditableTarget(e.target)) globalIsComposing = true;
+      }, true);
+
+      document.addEventListener("compositionend", (e) => {
+        if (isEditableTarget(e.target)) globalIsComposing = false;
+      }, true);
+
+      // =========================
+      // Row Highlighting
+      // =========================
+      function updateRowHighlighting() {
+        document.querySelectorAll("#data_socket tbody tr").forEach((row) => {
+          const methodId = row.getAttribute("data-method-id");
+          if (methodId) {
+            const isAllowed = allowedMethods.has(methodId);
+            row.classList.toggle("proto-disabled", !isAllowed);
+          }
+        });
+      }
+
+      // =========================
+      // Statistics Panel
+      // =========================
+      function renderStatisticsPanel() {
+        const wrapper = document.getElementById("statistics-wrapper");
+        if (!wrapper) return;
+
+        const totalMethodsAvailable = methodMap.size;  // From server (complete list)
+        const totalMethodsSeen = methodCounts.size;    // From traffic (this session)
+        const totalProtos = messages.length;
+        const uptime = Math.floor((Date.now() - sessionStartTime) / 1000);
+        const uptimeStr = `${Math.floor(uptime / 60)}m ${uptime % 60}s`;
+
+        wrapper.innerHTML = `
+          

+            

+              Session Statistics
+              
+            

+            

+              
Session Uptime: ${uptimeStr}

+              
Methods Available: ${totalMethodsAvailable}

+              
Methods Seen: ${totalMethodsSeen}

+              
Total Protos: ${totalProtos}

+            

+          

+        `;
+
+        // Toggle functionality
+        $("#stats-toggle").off("click").on("click", function() {
+          const content = $("#stats-content");
+          const btn = $(this);
+          if (content.is(":visible")) {
+            content.slideUp();
+            btn.text("▲");
+          } else {
+            content.slideDown();
+            btn.text("▼");
+          }
+        });
+      }
+
+      // =========================
+      // Enhanced Method Filter Panel
+      // =========================
+      function renderMethodFilterPanel() {
+        const wrapper = document.getElementById("method-filter-wrapper");
+        if (!wrapper) return;
+
+        const savedSearch = localStorage.getItem("methodFilterSearch") || "";
+
+        wrapper.innerHTML = `
+          

+            

+              Method Filter
+              (Uncheck to skip export)
+
+              
+
+              
+              
+            

+            

+              
+              

+            

+          

+        `;
+
+        // Render method list
+        renderMethodList(savedSearch);
+
+        // Search handler with IME support
+        let searchIsComposing = false;
+        $("#method-search").on("compositionstart", function() {
+          searchIsComposing = true;
+        });
+        $("#method-search").on("compositionend", function() {
+          searchIsComposing = false;
+          const query = $(this).val();
+          localStorage.setItem("methodFilterSearch", query);
+          renderMethodList(query);
+        });
+        $("#method-search").on("input", function() {
+          if (!searchIsComposing) {
+            const query = $(this).val();
+            localStorage.setItem("methodFilterSearch", query);
+            renderMethodList(query);
+          }
+        });
+
+        // Refresh methods button
+        $("#refresh-methods-btn").off("click").on("click", async function() {
+          const icon = $(this).find("i");
+          icon.addClass("fa-spin");
+          await loadAllMethodsFromServer();
+          icon.removeClass("fa-spin");
+          showToast('Methods refreshed from server');
+        });
+
+        // Seen-only toggle handler
+        $("#seen-only-toggle").off("click").on("click", function() {
+          showSeenMethodsOnly = !showSeenMethodsOnly;
+          storeSettings();
+
+          // Update button icon and tooltip
+          const icon = $(this).find("i");
+          icon.removeClass("fa-eye fa-list");
+          icon.addClass(showSeenMethodsOnly ? "fa-eye" : "fa-list");
+          $(this).attr("title", showSeenMethodsOnly
+            ? "Showing only methods seen in traffic (click to show all)"
+            : "Showing all available methods (click to show seen only)");
+
+          // Re-render the method list with new filter
+          const searchQuery = $("#method-search").val() || "";
+          renderMethodList(searchQuery);
+
+          // Show toast to indicate what's being displayed
+          if (showSeenMethodsOnly) {
+            showToast(`Showing ${methodCounts.size} methods seen in traffic`);
+          } else {
+            showToast(`Showing all ${methodMap.size} available methods`);
+          }
+        });
+
+        // Toggle functionality
+        $("#filter-toggle").off("click").on("click", function() {
+          const content = $("#filter-content");
+          const btn = $(this);
+          if (content.is(":visible")) {
+            content.slideUp();
+            btn.text("▲");
+          } else {
+            content.slideDown();
+            btn.text("▼");
+          }
+        });
+      }
+
+      function renderMethodList(filterText = "") {
+        const listEl = document.getElementById("method-list");
+        if (!listEl) return;
+
+        const filter = filterText.toLowerCase();
+        const entries = Array.from(methodMap.entries())
+          .filter(([id, name]) => {
+            // If "Seen Only" is enabled, only show methods that have been seen
+            if (showSeenMethodsOnly && !methodCounts.has(id)) {
+              return false;
+            }
+
+            // Apply search filter
+            if (!filter) return true;
+            return id.includes(filter) || name.toLowerCase().includes(filter);
+          })
+          .sort((a, b) => parseInt(a[0]) - parseInt(b[0]));
+
+        listEl.innerHTML = "";
+
+        // Show message if no methods match
+        if (entries.length === 0) {
+          const emptyMsg = document.createElement("div");
+          emptyMsg.style.cssText = "padding: 20px; text-align: center; opacity: 0.6; font-style: italic;";
+          emptyMsg.textContent = showSeenMethodsOnly
+            ? "No methods seen in traffic yet"
+            : "No methods found";
+          listEl.appendChild(emptyMsg);
+          updateRowHighlighting();
+          return;
+        }
+
+        entries.forEach(([id, name]) => {
+          const count = methodCounts.get(id) || 0;
+          const isChecked = allowedMethods.has(id);
+
+          const item = document.createElement("label");
+          item.className = "proto-item" + (isChecked ? " selected" : "");
+          item.setAttribute("role", "checkbox");
+          item.setAttribute("tabindex", "0");
+
+          const checkbox = document.createElement("input");
+          checkbox.type = "checkbox";
+          checkbox.checked = isChecked;
+
+          const spanId = document.createElement("span");
+          spanId.className = "proto-id";
+          spanId.textContent = id;
+
+          const spanName = document.createElement("span");
+          spanName.className = "proto-name";
+          spanName.textContent = name || "Unnamed";
+
+          const badge = document.createElement("span");
+          badge.className = "proto-badge";
+          badge.textContent = count;
+
+          item.appendChild(checkbox);
+          item.appendChild(spanId);
+          item.appendChild(spanName);
+          item.appendChild(badge);
+          listEl.appendChild(item);
+
+          // Toggle handler
+          function applyToggle(nextChecked) {
+            if (nextChecked) {
+              allowedMethods.add(id);
+              saveAllowedMethods();
+              updateRowHighlighting();
+            } else {
+              allowedMethods.delete(id);
+              saveAllowedMethods();
+              updateRowHighlighting();
+            }
+            checkbox.checked = allowedMethods.has(id);
+            item.classList.toggle("selected", allowedMethods.has(id));
+          }
+
+          item.addEventListener("click", (e) => {
+            if (e.target === checkbox) return;
+            e.preventDefault();
+            applyToggle(!allowedMethods.has(id));
+          });
+
+          checkbox.addEventListener("change", () => applyToggle(checkbox.checked));
+
+          item.addEventListener("keydown", (e) => {
+            if (e.key === " " || e.key === "Enter") {
+              e.preventDefault();
+              applyToggle(!allowedMethods.has(id));
+            }
+          });
+        });
+
+        updateRowHighlighting();
+      }
+
+      // =========================
+      // Session Management
+      // =========================
+      function resetSessionCache() {
+        rowFirstSeen.clear();
+        methodCounts.clear();
+        sessionStartTime = Date.now();
+        console.log("✦ Session cache cleared");
+        renderStatisticsPanel();
+        renderMethodFilterPanel();
+      }
+
+      // =========================
+      // Global API
+      // =========================
+      window.__protoWatcher__ = {
+        rowFirstSeen,
+        methodCounts,
+        allowedMethods,
+        knownMethods,
+        methodMap,
+        resetSessionCache,
+        renderMethodFilterPanel,
+        renderStatisticsPanel
+      };
+
+      // =========================
+      // Initialization
+      // =========================
+      $(document).ready(async function() {
+        // Load complete method list from server first
+        await loadAllMethodsFromServer();
+
+        // Then render UI
+        renderMethodFilterPanel();
+        renderStatisticsPanel();
+
+        // Periodic UI refresh (when not typing)
+        setInterval(() => {
+          if (!checkUserTyping()) {
+            renderMethodFilterPanel();
+            renderStatisticsPanel();
+          }
+        }, 10000); // Every 10 seconds
+      });
     
   
 
diff --git a/yarn.lock b/yarn.lock
index 1e97ecb..94ba71c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -140,6 +140,11 @@ ansi-styles@^6.1.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.3.tgz#c044d5dcc521a076413472597a1acb1f103c4041"
   integrity sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -367,6 +372,13 @@ jquery.json-viewer@^1.5.0:
   resolved "https://registry.yarnpkg.com/jquery.json-viewer/-/jquery.json-viewer-1.5.0.tgz#57bd248a8cf180c67c322cc4b555b49d0d301f10"
   integrity sha512-M/mRFXg14V/UUAlz7TBNBIDmQdWt05BunsqC/UjEx5BoFdQpNpfkfDdVn+VtjX951n/an/T9GWB3apBp02x8Mg==
 
+js-yaml@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.1.tgz#854c292467705b699476e1a2decc0c8a3458806b"
+  integrity sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==
+  dependencies:
+    argparse "^2.0.1"
+
 long@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"