├── static
    ├── icon.png
    └── screenshot.png
├── README.md
└── index.html


/static/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GONZOsint/trufflehog-explorer/HEAD/static/icon.png


--------------------------------------------------------------------------------
/static/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GONZOsint/trufflehog-explorer/HEAD/static/screenshot.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # TruffleHog Explorer 🕵️‍♂️
 2 | 
 3 | Welcome to [**TruffleHog Explorer**](gonzosint.github.io/trufflehog-explorer/), a user-friendly web-based tool to visualize and analyze data extracted using [TruffleHog](https://github.com/trufflesecurity/trufflehog). TruffleHog is one of the most powerful secrets discovery, classification, validation, and analysis open source tool. In this context, a secret refers to a credential a machine uses to authenticate itself to another machine. This includes API keys, database passwords, private encryption keys, and more.
 4 | 
 5 | With an improved UI/UX, powerful filtering options, and export capabilities, this tool helps security professionals efficiently review potential secrets and credentials found in their repositories.
 6 | 
 7 | > ⚠️ This dashboard has been tested only with GitHub TruffleHog JSON outputs. Expect updates soon to support additional formats and platforms.
 8 | 
 9 | You can use online version here: [**TruffleHog Explorer**](gonzosint.github.io/trufflehog-explorer/)
10 | 
11 | ![TruffleHog Explorer Screenshot](static/screenshot.png)
12 | 
13 | ---
14 | 
15 | ## 🚀 Features
16 | 
17 | - **Intuitive UI/UX:** Beautiful pastel theme with smooth navigation.
18 | - **Powerful Filtering:**
19 |   - Filter findings by repository, detector type, and uploaded file.
20 |   - Flexible date range selection with a calendar picker.
21 |   - Verification status categorization for effective review.
22 |   - Advanced search capabilities for faster identification.
23 | - **Batch Operations:**
24 |   - Verify or reject multiple findings with a single click.
25 |   - Toggle visibility of rejected results for a streamlined view.
26 |   - Bulk processing to manage large datasets efficiently.
27 | - **Export Capabilities:**
28 |   - Export verified secrets or filtered findings effortlessly.
29 |   - Save and load session backups for continuity.
30 |   - Generate reports in multiple formats (JSON, CSV).
31 | - **Dynamic Sorting:**
32 |   - Sort results by repository, date, or verification status.
33 |   - Customizable sorting preferences for a personalized experience.
34 | 
35 | ---
36 | 
37 | ## 📥 Installation & Usage
38 | 
39 | 
40 | ### 1. Clone the Repository
41 | ```bash
42 | $ git clone https://github.com/GONZOsint/trufflehog-explorer.git
43 | $ cd trufflehog-explorer
44 | ```
45 | 
46 | ### 2. Open the `index.html`
47 | Simply open the `index.html` file in your preferred web browser.
48 | 
49 | ```bash
50 | $ open index.html
51 | ```
52 | 
53 | ---
54 | 
55 | ## 📂 How to Use
56 | 
57 | 1. **Upload TruffleHog JSON Findings:**
58 |    - Click on the **"Load Data"** section and select your `.json` files from [TruffleHog](https://github.com/trufflesecurity/trufflehog) output.
59 |    - Multiple files are supported.
60 | 2. **Apply Filters:**
61 |    - Choose filters such as repository, detector type, and verification status.
62 |    - Utilize the date range picker to narrow down findings.
63 |    - Leverage the search function to locate specific findings quickly.
64 | 3. **Review Findings:**
65 |    - Click on a finding to expand and view its details.
66 |    - Use the action buttons to verify or reject findings.
67 |    - Add comments and annotations for better tracking.
68 | 4. **Export Results:**
69 |    - Export verified or filtered findings for reporting.
70 |    - Save session data for future review and analysis.
71 | 5. **Save Your Progress:**
72 |    - Save your session and resume later without losing any progress.
73 |    - Automatic backup feature to prevent data loss.
74 | 
75 | 
76 | ---
77 | 
78 | **Happy Securing! 🔒**
79 | 
80 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html>
   3 | <head>
   4 |   <meta charset="UTF-8" />
   5 |   <title>TruffleHog Results - Improved UI/UX</title>
   6 | 
   7 |   <!-- FAVICON -->
   8 |   <link rel="icon" type="image/png" href="static/icon.png" />
   9 | 
  10 |   <!-- CUSTOM FONT: Poppins from Google Fonts -->
  11 |   <link rel="preconnect" href="https://fonts.gstatic.com" />
  12 |   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet" />
  13 | 
  14 |   <!-- FLATPICKR DATE RANGE PICKER (CDN) -->
  15 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  16 |   <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  17 | 
  18 |   <!-- BOOTSTRAP ICONS (CDN) -->
  19 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  20 | 
  21 |   <style>
  22 |     /*********************************
  23 |      * GLOBAL & BASIC LAYOUT
  24 |      *********************************/
  25 |     * {
  26 |       box-sizing: border-box;
  27 |       margin: 0;
  28 |       padding: 0;
  29 |     }
  30 |     body {
  31 |       font-family: 'Poppins', sans-serif;
  32 |       color: #555;
  33 |       line-height: 1.6;
  34 |       min-height: 100vh;
  35 |       /* Softer pink-to-purple background */
  36 |       background: linear-gradient(135deg, #fdf7fc 0%, #fcf0fd 100%);
  37 |       display: flex;
  38 |       flex-direction: column;
  39 |     }
  40 | 
  41 |     /*********************************
  42 |      * HEADER
  43 |      *********************************/
  44 |     header {
  45 |       display: flex;
  46 |       align-items: center;
  47 |       justify-content: center;
  48 |       background: linear-gradient(45deg, #E1A8D7 0%, #CEB8E7 100%);
  49 |       box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  50 |       padding: 1.2rem 0;
  51 |       margin-bottom: 1rem;
  52 |     }
  53 |     header img {
  54 |       width: 70px;
  55 |       height: 70px;
  56 |       margin-right: 10px;
  57 |     }
  58 |     header h1 {
  59 |       font-weight: 700;
  60 |       letter-spacing: 1px;
  61 |       color: #fff;
  62 |       font-size: 1.5rem;
  63 |     }
  64 | 
  65 |     .layout {
  66 |       display: flex;
  67 |       flex: 1 0 auto;
  68 |       gap: 20px;
  69 |       padding: 20px;
  70 |       max-width: 1400px;
  71 |       margin: 0 auto;
  72 |       width: 100%;
  73 |     }
  74 | 
  75 |     /*********************************
  76 |      * SIDEBAR
  77 |      *********************************/
  78 |     .sidebar {
  79 |       flex: 0 0 320px;
  80 |       display: flex;
  81 |       flex-direction: column;
  82 |       gap: 20px;
  83 |       background-color: #ffffffcc;
  84 |       border: 1px solid #ecdff0;
  85 |       border-radius: 12px;
  86 |       padding: 20px;
  87 |       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  88 |     }
  89 |     .sidebar-section {
  90 |       display: flex;
  91 |       flex-direction: column;
  92 |       gap: 15px;
  93 |       padding: 15px 0;
  94 |       border-bottom: 1px solid #f1e3f4;
  95 |     }
  96 |     .sidebar-section:last-child {
  97 |       border-bottom: none;
  98 |       padding-bottom: 0;
  99 |     }
 100 |     .sidebar-section h2 {
 101 |       margin-bottom: 8px;
 102 |       font-size: 1.1rem;
 103 |       color: #b56cc2;
 104 |       position: relative;
 105 |     }
 106 |     .sidebar-section h2::after {
 107 |       content: '';
 108 |       display: block;
 109 |       width: 30px;
 110 |       height: 3px;
 111 |       background: #b56cc2;
 112 |       margin-top: 6px;
 113 |       border-radius: 2px;
 114 |     }
 115 | 
 116 |     /*********************************
 117 |      * UPLOAD SECTION
 118 |      *********************************/
 119 |     .upload-group {
 120 |       display: flex;
 121 |       flex-direction: column;
 122 |       gap: 8px;
 123 |     }
 124 |     .file-input {
 125 |       display: inline-block;
 126 |       padding: 8px 12px;
 127 |       border: 1px solid #e3c2d5;
 128 |       border-radius: 4px;
 129 |       cursor: pointer;
 130 |       background-color: #fff;
 131 |       transition: box-shadow 0.2s ease;
 132 |     }
 133 |     .file-input:hover {
 134 |       box-shadow: 0 1px 4px rgba(0,0,0,0.08);
 135 |     }
 136 |     .upload-group p {
 137 |       margin: 0;
 138 |       font-size: 0.9rem;
 139 |       color: #666;
 140 |     }
 141 | 
 142 |     /*********************************
 143 |      * MAIN CONTENT
 144 |      *********************************/
 145 |     .main-content {
 146 |       flex: 1 1 auto;
 147 |       display: flex;
 148 |       flex-direction: column;
 149 |       gap: 25px;
 150 |     }
 151 | 
 152 |     /* Stats Container */
 153 |     .stats-container {
 154 |       background-color: #ffffffcc;
 155 |       padding: 20px;
 156 |       border-radius: 12px;
 157 |       border: 1px solid #ecdff0;
 158 |       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 159 |       transition: box-shadow 0.3s ease;
 160 |     }
 161 |     .stats-container:hover {
 162 |       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
 163 |     }
 164 |     .stats-container h2 {
 165 |       color: #b56cc2;
 166 |       font-size: 1.4rem;
 167 |       margin-bottom: 1.5rem;
 168 |     }
 169 |     .stats-grid {
 170 |       /* 4 columns -> we have 8 cards => 2 rows of 4 columns each */
 171 |       display: grid;
 172 |       grid-template-columns: repeat(4, 1fr);
 173 |       gap: 15px;
 174 |       margin-bottom: 20px;
 175 |     }
 176 |     .stats-detail {
 177 |       padding: 10px;
 178 |       border-radius: 0.25rem;
 179 |       background-color: #fff;
 180 |       border: 1px solid #f1e3f4;
 181 |       text-align: center;
 182 |       font-size: 0.9rem;
 183 |       color: #555;
 184 |     }
 185 |     .stats-detail strong {
 186 |       display: block;
 187 |       font-size: 1rem;
 188 |       margin-bottom: 0.5rem;
 189 |       color: #444;
 190 |     }
 191 |     .filtered-count {
 192 |       text-align: center;
 193 |       font-weight: 500;
 194 |       margin-top: 0.5rem;
 195 |       color: #666;
 196 |     }
 197 | 
 198 |     /* Verification bar */
 199 |     .verification-stats {
 200 |       text-align: center;
 201 |       margin-top: 10px;
 202 |     }
 203 |     .verification-stats p {
 204 |       margin-bottom: 0.5rem;
 205 |       font-weight: 500;
 206 |       color: #666;
 207 |     }
 208 |     .verification-bar-container {
 209 |       background-color: #f3e2eb;
 210 |       border-radius: 4px;
 211 |       overflow: hidden;
 212 |       height: 12px;
 213 |       margin: 0 auto;
 214 |       max-width: 300px;
 215 |       position: relative;
 216 |     }
 217 |     .verification-bar {
 218 |       /* Pink bar for verified/unverified ratio */
 219 |       background-color: #f7c7db;
 220 |       height: 12px;
 221 |       width: 0%;
 222 |       transition: width 0.4s ease;
 223 |     }
 224 | 
 225 |     /* Results Container */
 226 |     #results-container p {
 227 |       margin-top: 10px;
 228 |       font-size: 0.95rem;
 229 |       color: #666;
 230 |     }
 231 | 
 232 |     /*********************************
 233 |      * FILTERS
 234 |      *********************************/
 235 |     .controls-container {
 236 |       display: flex;
 237 |       flex-direction: column;
 238 |       gap: 15px;
 239 |     }
 240 |     .controls-container label {
 241 |       font-weight: 500;
 242 |       margin-bottom: 5px;
 243 |       display: inline-block;
 244 |       color: #555;
 245 |     }
 246 |     .info-icon {
 247 |       font-weight: bold;
 248 |       cursor: help;
 249 |       margin-left: 4px;
 250 |       color: #888;
 251 |     }
 252 |     .controls-container select,
 253 |     .controls-container input[type="text"] {
 254 |       width: 100%;
 255 |       padding: 0.5rem 1rem;
 256 |       border: 1px solid #d8cfe0;
 257 |       border-radius: 0.25rem;
 258 |       font-size: 1rem;
 259 |       cursor: pointer;
 260 |       background-color: #fff;
 261 |       background-image: url('data:image/svg+xml;utf8,<svg fill="%23555" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
 262 |       background-repeat: no-repeat;
 263 |       background-position: right 1rem center;
 264 |       background-size: 16px;
 265 |       appearance: none;
 266 |       transition: box-shadow 0.2s ease, border-color 0.2s ease;
 267 |       color: #555;
 268 |     }
 269 |     .controls-container select:focus,
 270 |     .controls-container input[type="text"]:focus {
 271 |       outline: none;
 272 |       box-shadow: 0 1px 4px rgba(0,0,0,0.08);
 273 |     }
 274 |     /* Active filter highlight */
 275 |     .controls-container input[type="text"].active-filter {
 276 |       border-color: #b56cc2;
 277 |       background-color: #fef8ff;
 278 |       box-shadow: 0 0 0 2px rgba(181, 108, 194, 0.1);
 279 |     }
 280 | 
 281 |     /*********************************
 282 |      * BUTTONS (Pastel Pink/White/Purple)
 283 |      *********************************/
 284 |     .btn {
 285 |       display: inline-flex;
 286 |       align-items: center;
 287 |       justify-content: center;
 288 |       padding: 8px 14px;
 289 |       border: none;
 290 |       border-radius: 4px;
 291 |       font-size: 0.95rem;
 292 |       font-weight: 500;
 293 |       cursor: pointer;
 294 |       transition: opacity 0.2s ease, box-shadow 0.2s ease;
 295 |     }
 296 |     .btn + .btn {
 297 |       margin-left: 0px;
 298 |     }
 299 |     .btn:hover {
 300 |       opacity: 0.9;
 301 |       box-shadow: 0 2px 6px rgba(0,0,0,0.1);
 302 |     }
 303 |     /* Pink (Danger) */
 304 |     .btn-danger {
 305 |       background-color: #f7c7db;
 306 |       color: #5c4150; /* a darker mauve for text */
 307 |     }
 308 |     /* White (Warning) */
 309 |     .btn-warning {
 310 |       background-color: #fff;
 311 |       color: #aa6baa;
 312 |       border: 1px solid #d8cfe0;
 313 |     }
 314 |     /* Purple (Info) */
 315 |     .btn-info {
 316 |       background-color: #d7c3ea;
 317 |       color: #4a375a;
 318 |     }
 319 |     /* Pinkish Purple (Secondary) */
 320 |     .btn-secondary {
 321 |       background-color: #eac6f2;
 322 |       color: #4a375a;
 323 |     }
 324 | 
 325 |     /*********************************
 326 |      * ACTIONS GROUP
 327 |      *********************************/
 328 |     .actions-group {
 329 |       margin-top: 10px;
 330 |       display: flex;
 331 |       flex-direction: column;
 332 |       gap: 10px;
 333 |     }
 334 |     .actions-group h3 {
 335 |       margin: 0;
 336 |       font-size: 1rem;
 337 |       color: #444;
 338 |     }
 339 |     .buttons-group {
 340 |       display: flex;
 341 |       flex-wrap: wrap;
 342 |       gap: 10px;
 343 |       margin-top: 5px;
 344 |     }
 345 | 
 346 |     /*********************************
 347 |      * RESULT CARDS
 348 |      *********************************/
 349 |     .result-container {
 350 |       background-color: #ffffffcc;
 351 |       border-radius: 8px;
 352 |       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 353 |       margin-bottom: 15px;
 354 |       padding: 10px;
 355 |       border: 1px solid #ecdff0;
 356 |       transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 357 |       animation: fadeIn 0.5s ease-out forwards;
 358 |       position: relative;
 359 |     }
 360 |     .result-container:hover {
 361 |       transform: scale(1.01);
 362 |       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
 363 |     }
 364 |     .collapsed .result-body {
 365 |       display: none;
 366 |     }
 367 |     .result-header {
 368 |       font-size: 1rem;
 369 |       color: #b56cc2;
 370 |       margin-bottom: 0.75rem;
 371 |       border-bottom: 1px solid #f1e3f4;
 372 |       padding-bottom: 0.25rem;
 373 |       display: flex;
 374 |       align-items: center;
 375 |       justify-content: space-between;
 376 |       cursor: pointer;
 377 |     }
 378 |     .result-header .title {
 379 |       font-weight: 600;
 380 |     }
 381 | 
 382 |     .summary-line {
 383 |       display: none;
 384 |       font-size: 0.85rem;
 385 |       color: #666;
 386 |       margin-top: 6px;
 387 |     }
 388 |     .collapsed .summary-line {
 389 |       display: block; /* show minimal info in collapsed mode */
 390 |     }
 391 | 
 392 |     .result-body {
 393 |       display: grid;
 394 |       grid-template-columns: repeat(5, 1fr);
 395 |       gap: 6px;
 396 |       font-size: 0.85rem;
 397 |       width: 100%;
 398 |       margin-top: 10px;
 399 |     }
 400 |     .result-detail {
 401 |       word-break: break-word;
 402 |       background-color: #fafafa;
 403 |       border: 1px solid #eee;
 404 |       border-radius: 4px;
 405 |       padding: 6px;
 406 |       color: #555;
 407 |     }
 408 |     .result-detail strong {
 409 |       font-weight: 600;
 410 |       color: #444;
 411 |       display: block;
 412 |       margin-bottom: 3px;
 413 |       font-size: 0.85rem;
 414 |     }
 415 | 
 416 |     /* Leaked Info in soft pink */
 417 |     .leaked-container {
 418 |       grid-column: 1 / -1;
 419 |       background-color: #ffe4f0; /* soft pink highlight */
 420 |       border: 1px solid #eee;
 421 |       border-radius: 0.25rem;
 422 |       padding: 10px;
 423 |       font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 424 |       font-size: 0.85rem;
 425 |       color: #333;
 426 |       white-space: pre-wrap;
 427 |       word-break: break-all; /* Break long strings */
 428 |       overflow-wrap: break-word; /* Wrap long words */
 429 |       max-height: 200px; /* Limit height */
 430 |       overflow-y: auto; /* Add scroll for long content */
 431 |       margin-top: 6px;
 432 |     }
 433 | 
 434 |     /*********************************
 435 |      * TAGS
 436 |      *********************************/
 437 |     .tag {
 438 |       display: inline-block;
 439 |       padding: 2px 8px;
 440 |       border-radius: 12px;
 441 |       font-size: 0.75rem;
 442 |       font-weight: 600;
 443 |       color: #fff;
 444 |       margin-left: 6px;
 445 |     }
 446 |     .tag-verified {
 447 |       background-color: #f7c7db; /* pastel pink */
 448 |     }
 449 |     .tag-unverified {
 450 |       background-color: #d7c3ea; /* pastel purple */
 451 |     }
 452 |     .tag-rejected {
 453 |       background-color: #f9e0e9; /* lighter pinkish */
 454 |       color: #555;
 455 |     }
 456 | 
 457 |     /*********************************
 458 |      * ERROR LOG
 459 |      *********************************/
 460 |     #errorLog {
 461 |       margin-top: 1rem;
 462 |     }
 463 |     .error-message {
 464 |       color: #cc4b4b;
 465 |       font-weight: bold;
 466 |       margin-top: 0.5rem;
 467 |     }
 468 | 
 469 |     /*********************************
 470 |      * ANIMATIONS
 471 |      *********************************/
 472 |     @keyframes fadeIn {
 473 |       from { opacity: 0; }
 474 |       to { opacity: 1; }
 475 |     }
 476 | 
 477 |     /*********************************
 478 |      * RESPONSIVE STYLES
 479 |      *********************************/
 480 |     @media (max-width: 768px) {
 481 |       .layout {
 482 |         flex-direction: column;
 483 |       }
 484 |       .sidebar {
 485 |         width: 100%;
 486 |         flex: none;
 487 |       }
 488 |       .main-content {
 489 |         width: 100%;
 490 |       }
 491 |       .result-body {
 492 |         grid-template-columns: 1fr 1fr;
 493 |       }
 494 |     }
 495 |   </style>
 496 | </head>
 497 | <body>
 498 | 
 499 |   <!-- Header with icon -->
 500 |   <header>
 501 |     <img src="static/icon.png" alt="Icon" />
 502 |     <h1>TruffleHog Explorer</h1>
 503 |   </header>
 504 | 
 505 |   <div class="layout">
 506 | 
 507 |     <!-- SIDEBAR -->
 508 |     <div class="sidebar">
 509 |       <!-- 1) LOAD DATA -->
 510 |       <div class="sidebar-section">
 511 |         <h2>Load Data</h2>
 512 |         <div class="upload-group">
 513 |           <input type="file" id="trufflehogFile" accept=".json" multiple class="file-input" />
 514 |           <p>Select one or more TruffleHog JSON (NDJSON) files</p>
 515 |         </div>
 516 |       </div>
 517 | 
 518 |       <!-- 1B) LOAD SESSION -->
 519 |       <div class="sidebar-section">
 520 |         <h2>Load Session</h2>
 521 |         <div class="upload-group">
 522 |           <input type="file" id="sessionFile" accept=".json" class="file-input" />
 523 |           <p>Load previously saved session (JSON)</p>
 524 |         </div>
 525 |       </div>
 526 | 
 527 |       <!-- 2) FILTERS -->
 528 |       <div class="sidebar-section">
 529 |         <h2>Filters</h2>
 530 |         <div class="controls-container">
 531 |           <div>
 532 |             <label for="filterRepository">
 533 |               Filter by Repository:
 534 |               <span class="info-icon" title="Choose a specific repository or leave as All.">?</span>
 535 |             </label>
 536 |             <select id="filterRepository">
 537 |               <option value="">All</option>
 538 |             </select>
 539 |           </div>
 540 |           <div>
 541 |             <label for="filterDetector">
 542 |               Filter by Detector:
 543 |               <span class="info-icon" title="Which type of secret detector flagged the finding?">?</span>
 544 |             </label>
 545 |             <select id="filterDetector">
 546 |               <option value="">All</option>
 547 |             </select>
 548 |           </div>
 549 |           <div>
 550 |             <label for="filterFileName">
 551 |               Filter by Uploaded File:
 552 |               <span class="info-icon" title="Which JSON file the finding originated from.">?</span>
 553 |             </label>
 554 |             <select id="filterFileName">
 555 |               <option value="">All</option>
 556 |             </select>
 557 |           </div>
 558 |           <div>
 559 |             <label for="filterVerified">
 560 |               Filter by Verified:
 561 |               <span class="info-icon" title="Show only Verified or Unverified secrets.">?</span>
 562 |             </label>
 563 |             <select id="filterVerified">
 564 |               <option value="">All</option>
 565 |               <option value="true">Verified</option>
 566 |               <option value="false">Unverified</option>
 567 |             </select>
 568 |           </div>
 569 | 
 570 |           <!-- FLATPICKR Range Input -->
 571 |           <div>
 572 |             <label for="filterDateRange">
 573 |               Filter by Date Range:
 574 |               <span class="info-icon" title="Pick a start and end date from the calendar.">?</span>
 575 |             </label>
 576 |             <input type="text" id="filterDateRange" placeholder="Select date range..." />
 577 |           </div>
 578 | 
 579 |           <!-- REGEX Search -->
 580 |           <div>
 581 |             <label for="filterRegex">
 582 |               Search Raw Results (Regex):
 583 |               <span class="info-icon" title="Use regex patterns to search leaked information. E.g., password.*123">?</span>
 584 |             </label>
 585 |             <input type="text" id="filterRegex" placeholder="Enter regex pattern..." />
 586 |           </div>
 587 | 
 588 |           <!-- Sort -->
 589 |           <div>
 590 |             <label for="sortBy">Sort By:</label>
 591 |             <select id="sortBy">
 592 |               <option value="">No Sorting</option>
 593 |               <option value="dateAsc">Date Asc</option>
 594 |               <option value="dateDesc">Date Desc</option>
 595 |               <option value="repoAsc">Repository Asc</option>
 596 |               <option value="repoDesc">Repository Desc</option>
 597 |               <option value="verifiedAsc">Verified First</option>
 598 |               <option value="verifiedDesc">Unverified First</option>
 599 |             </select>
 600 |           </div>
 601 | 
 602 |           <!-- Clear Filters Button -->
 603 |           <div>
 604 |             <button class="btn btn-danger" id="clearFiltersBtn">
 605 |               <i class="bi bi-backspace-fill"></i> &nbspClear All Filters
 606 |             </button>
 607 |           </div>
 608 |         </div>
 609 |       </div>
 610 | 
 611 |       <!-- 3) ACTIONS -->
 612 |       <div class="sidebar-section">
 613 |         <h2>Actions</h2>
 614 | 
 615 |         <!-- Batch Review -->
 616 |         <div class="actions-group">
 617 |           <h3>Batch Review</h3>
 618 |           <div class="buttons-group">
 619 |             <!-- Button: Reject All Filtered -->
 620 |             <button class="btn btn-danger" id="rejectAllBtn">
 621 |               <i class="bi bi-x-circle"></i> &nbspReject All Filtered
 622 |             </button>
 623 |             <!-- Button: Mark All Filtered Verified -->
 624 |             <button class="btn btn-secondary" id="verifyAllBtn">
 625 |               <i class="bi bi-check-circle"></i> &nbspVerify All Filtered
 626 |             </button>
 627 |           </div>
 628 |         </div>
 629 | 
 630 |         <!-- Visibility -->
 631 |         <div class="actions-group">
 632 |           <h3>Visibility</h3>
 633 |           <div class="buttons-group">
 634 |             <!-- Button: Show/Hide Rejected -->
 635 |             <button class="btn btn-info" id="toggleRejectedBtn">
 636 |               <i class="bi bi-eye-slash"></i> &nbspHide Rejected
 637 |             </button>
 638 |             <!-- Expand/Collapse All Cards -->
 639 |             <button class="btn btn-info" id="expandAllBtn">
 640 |               <i class="bi bi-arrows-collapse"></i> &nbspCollapse All
 641 |             </button>
 642 |           </div>
 643 |         </div>
 644 | 
 645 |         <!-- Export -->
 646 |         <div class="actions-group">
 647 |           <h3>Export</h3>
 648 |           <div class="buttons-group">
 649 |             <!-- Button: Export Verified -->
 650 |             <button class="btn btn-warning" id="exportVerifiedBtn">
 651 |               <i class="bi bi-download"></i> &nbspExport Verified
 652 |             </button>
 653 |             <!-- Button: Export Filtered -->
 654 |             <button class="btn btn-warning" id="exportFilteredBtn">
 655 |               <i class="bi bi-download"></i> &nbspExport Filtered
 656 |             </button>
 657 |           </div>
 658 |         </div>
 659 | 
 660 |         <!-- Session Backup -->
 661 |         <div class="actions-group">
 662 |           <h3>Session Backup</h3>
 663 |           <div class="buttons-group">
 664 |             <!-- Button: Save Session -->
 665 |             <button class="btn btn-warning" id="saveSessionBtn">
 666 |               <i class="bi bi-save"></i> &nbspSave Session
 667 |             </button>
 668 |           </div>
 669 |         </div>
 670 | 
 671 |       </div><!-- .sidebar-section -->
 672 |     </div><!-- .sidebar -->
 673 | 
 674 |     <!-- MAIN CONTENT -->
 675 |     <div class="main-content">
 676 |       <!-- Stats Container -->
 677 |       <div class="stats-container">
 678 |         <h2>Statistics</h2>
 679 |         <!-- We have 8 stats now, so it forms a 4x2 grid. -->
 680 |         <div class="stats-grid">
 681 |           <div class="stats-detail">
 682 |             <strong><i class="bi bi-card-list"></i> Total</strong>
 683 |             <span id="totalFindings">0</span>
 684 |           </div>
 685 |           <div class="stats-detail">
 686 |             <strong><i class="bi bi-github"></i> Repos</strong>
 687 |             <span id="uniqueRepositories">0</span>
 688 |           </div>
 689 |           <div class="stats-detail">
 690 |             <strong><i class="bi bi-search"></i> Detectors</strong>
 691 |             <span id="uniqueDetectors">0</span>
 692 |           </div>
 693 |           <div class="stats-detail">
 694 |             <strong><i class="bi bi-file-earmark-text"></i> Files</strong>
 695 |             <span id="uniqueFiles">0</span>
 696 |           </div>
 697 |           <div class="stats-detail">
 698 |             <strong><i class="bi bi-people-fill"></i> Authors</strong>
 699 |             <span id="uniqueAuthors">0</span>
 700 |           </div>
 701 |           <div class="stats-detail">
 702 |             <strong><i class="bi bi-calendar-event"></i> First Seen</strong>
 703 |             <span id="firstSeen">N/A</span>
 704 |           </div>
 705 |           <div class="stats-detail">
 706 |             <strong><i class="bi bi-calendar2-week"></i> Last Seen</strong>
 707 |             <span id="lastSeen">N/A</span>
 708 |           </div>
 709 |           <!-- New 8th stat: Rejected -->
 710 |           <div class="stats-detail">
 711 |             <strong><i class="bi bi-archive-fill"></i> Rejected</strong>
 712 |             <span id="rejectedCount">0</span>
 713 |           </div>
 714 |         </div>
 715 | 
 716 |         <!-- Verified Stats -->
 717 |         <div class="verification-stats">
 718 |           <p>
 719 |             <strong>Verified:</strong>
 720 |             <span id="verifiedCount">0</span> |
 721 |             <strong>Unverified:</strong>
 722 |             <span id="unverifiedCount">0</span>
 723 |           </p>
 724 |           <div class="verification-bar-container">
 725 |             <div class="verification-bar" id="verificationBar"></div>
 726 |           </div>
 727 |         </div>
 728 | 
 729 |         <!-- Filtered Count -->
 730 |         <div class="filtered-count" id="filteredCountDisplay">
 731 |           Currently Displaying 0 / 0 Findings
 732 |         </div>
 733 |       </div>
 734 | 
 735 |       <!-- Results Container -->
 736 |       <div id="results-container"></div>
 737 | 
 738 |       <!-- Error Log Container -->
 739 |       <div id="errorLog"></div>
 740 |     </div><!-- .main-content -->
 741 |   </div><!-- .layout -->
 742 | 
 743 |   <script>
 744 |     /**************************************************************
 745 |      * Initialize Flatpickr in "range" mode
 746 |      **************************************************************/
 747 |     let selectedDateRange = [null, null];
 748 |     flatpickr("#filterDateRange", {
 749 |       mode: "range",
 750 |       dateFormat: "Y-m-d",
 751 |       onClose: function(selectedDates) {
 752 |         selectedDateRange = selectedDates;
 753 |         applyFilters();
 754 |       }
 755 |     });
 756 | 
 757 |     /**************************************************************
 758 |      * DOM ELEMENTS
 759 |      **************************************************************/
 760 |     const trufflehogFile = document.getElementById('trufflehogFile');
 761 |     const sessionFile = document.getElementById('sessionFile'); // for loading session
 762 | 
 763 |     const toggleRejectedBtn = document.getElementById('toggleRejectedBtn');
 764 |     const rejectAllBtn = document.getElementById('rejectAllBtn');
 765 |     const verifyAllBtn = document.getElementById('verifyAllBtn');
 766 |     const exportVerifiedBtn = document.getElementById('exportVerifiedBtn');
 767 |     const exportFilteredBtn = document.getElementById('exportFilteredBtn');
 768 |     const expandAllBtn = document.getElementById('expandAllBtn');
 769 |     const clearFiltersBtn = document.getElementById('clearFiltersBtn');
 770 |     const saveSessionBtn = document.getElementById('saveSessionBtn'); // for saving session
 771 | 
 772 |     // Filter elements
 773 |     const filterRepository = document.getElementById('filterRepository');
 774 |     const filterDetector = document.getElementById('filterDetector');
 775 |     const filterFileName = document.getElementById('filterFileName');
 776 |     const filterVerified = document.getElementById('filterVerified');
 777 |     const filterRegex = document.getElementById('filterRegex');
 778 |     const sortBy = document.getElementById('sortBy');
 779 | 
 780 |     // Stats elements
 781 |     const totalFindingsSpan = document.getElementById('totalFindings');
 782 |     const uniqueRepositoriesSpan = document.getElementById('uniqueRepositories');
 783 |     const uniqueDetectorsSpan = document.getElementById('uniqueDetectors');
 784 |     const uniqueFilesSpan = document.getElementById('uniqueFiles');
 785 |     const uniqueAuthorsSpan = document.getElementById('uniqueAuthors');
 786 |     const firstSeenSpan = document.getElementById('firstSeen');
 787 |     const lastSeenSpan = document.getElementById('lastSeen');
 788 |     const verificationBar = document.getElementById('verificationBar');
 789 |     const verifiedCountSpan = document.getElementById('verifiedCount');
 790 |     const unverifiedCountSpan = document.getElementById('unverifiedCount');
 791 |     const rejectedCountSpan = document.getElementById('rejectedCount');
 792 |     const filteredCountDisplay = document.getElementById('filteredCountDisplay');
 793 | 
 794 |     const resultsContainer = document.getElementById('results-container');
 795 |     const errorLog = document.getElementById('errorLog');
 796 | 
 797 |     // Full results in memory
 798 |     let allResults = [];
 799 |     // Current filtered subset
 800 |     let currentFilteredResults = [];
 801 | 
 802 |     // Windowing variables - only one batch rendered at a time
 803 |     let windowBatchSize = 50;
 804 |     let currentBatchIndex = 0;
 805 |     let totalBatches = 0;
 806 | 
 807 |     // statusesMap: { [uniqueId]: { Verified: bool, Rejected: bool } }
 808 |     let statusesMap = {};
 809 | 
 810 |     // Toggling Rejected display
 811 |     let hideRejected = true;
 812 | 
 813 |     // Expand/Collapse All toggle
 814 |     let expandAllState = false;
 815 | 
 816 |     /**************************************************************
 817 |      * RESTORE STATUSES FROM LOCAL STORAGE (if any)
 818 |      **************************************************************/
 819 |     document.addEventListener('DOMContentLoaded', () => {
 820 |       try {
 821 |         const stored = localStorage.getItem('thStatuses');
 822 |         if (stored) {
 823 |           statusesMap = JSON.parse(stored);
 824 |         }
 825 |       } catch (e) {
 826 |         console.warn('Error reading localStorage for statuses:', e);
 827 |       }
 828 |     });
 829 | 
 830 |     /**************************************************************
 831 |      * FILE UPLOAD HANDLER (TruffleHog data)
 832 |      **************************************************************/
 833 |     trufflehogFile.addEventListener('change', async (event) => {
 834 |       resultsContainer.innerHTML = '';
 835 |       errorLog.innerHTML = '';
 836 |       allResults = [];
 837 |       currentFilteredResults = [];
 838 | 
 839 |       // Reset filter dropdowns
 840 |       filterRepository.innerHTML = '<option value="">All</option>';
 841 |       filterDetector.innerHTML = '<option value="">All</option>';
 842 |       filterFileName.innerHTML = '<option value="">All</option>';
 843 | 
 844 |       const files = event.target.files;
 845 |       const parsePromises = [];
 846 | 
 847 |       for (const file of files) {
 848 |         const reader = new FileReader();
 849 |         const promise = new Promise((resolve) => {
 850 |           reader.onload = (e) => {
 851 |             const text = e.target.result;
 852 |             const lines = text.split('\n').map(l => l.trim()).filter(l => l !== '');
 853 | 
 854 |             const repoSet = new Set();
 855 |             const detSet = new Set();
 856 |             const fileSet = new Set();
 857 | 
 858 |             lines.forEach((line, idx) => {
 859 |               // skip lines that are not valid JSON
 860 |               if (!line.startsWith('{') && !line.startsWith('[')) return;
 861 |               try {
 862 |                 const parsed = JSON.parse(line);
 863 | 
 864 |                 // Create a short unique ID
 865 |                 const shortId = 'id' + Math.random().toString(36).substr(2, 6);
 866 | 
 867 |                 // Restore Verified/Rejected status if it exists
 868 |                 const oldStatus = statusesMap[shortId] || { Verified: false, Rejected: false };
 869 |                 parsed.Verified = oldStatus.Verified;
 870 |                 parsed.Rejected = oldStatus.Rejected;
 871 | 
 872 |                 parsed._id = shortId;
 873 |                 parsed._uploadedFile = file.name;
 874 |                 allResults.push(parsed);
 875 | 
 876 |                 // Track possible filter values
 877 |                 const repo = getNestedValue(parsed, 'SourceMetadata.Data.Github.repository');
 878 |                 if (repo) repoSet.add(repo);
 879 | 
 880 |                 const det = parsed.DetectorName;
 881 |                 if (det) detSet.add(det);
 882 | 
 883 |                 fileSet.add(file.name);
 884 | 
 885 |               } catch (err) {
 886 |                 console.error(`Error parsing JSON in ${file.name} at line ${idx + 1}:`, err);
 887 |                 const errDiv = document.createElement('div');
 888 |                 errDiv.classList.add('error-message');
 889 |                 errDiv.textContent = `Error parsing JSON line ${idx + 1} in ${file.name}: ${err.message}`;
 890 |                 errorLog.appendChild(errDiv);
 891 |               }
 892 |             });
 893 | 
 894 |             // Update dropdowns
 895 |             repoSet.forEach(r => addOptionIfNotExists(filterRepository, r));
 896 |             detSet.forEach(d => addOptionIfNotExists(filterDetector, d));
 897 |             fileSet.forEach(f => addOptionIfNotExists(filterFileName, f));
 898 | 
 899 |             resolve();
 900 |           };
 901 |           reader.onerror = () => {
 902 |             const errDiv = document.createElement('div');
 903 |             errDiv.classList.add('error-message');
 904 |             errDiv.textContent = `Error reading file: ${file.name}`;
 905 |             errorLog.appendChild(errDiv);
 906 |             resolve();
 907 |           };
 908 |           reader.readAsText(file);
 909 |         });
 910 |         parsePromises.push(promise);
 911 |       }
 912 | 
 913 |       Promise.all(parsePromises).then(() => {
 914 |         updateStats();
 915 |         applyFilters();
 916 |       });
 917 |     });
 918 | 
 919 |     /**************************************************************
 920 |      * NEW CODE: LOAD SESSION FILE
 921 |      **************************************************************/
 922 |     sessionFile.addEventListener('change', async (event) => {
 923 |       const files = event.target.files;
 924 |       if (!files || !files.length) return;
 925 | 
 926 |       const file = files[0];
 927 |       const reader = new FileReader();
 928 |       reader.onload = (e) => {
 929 |         try {
 930 |           const data = JSON.parse(e.target.result);
 931 |           if (!Array.isArray(data)) {
 932 |             throw new Error('Session file is not an array of findings.');
 933 |           }
 934 | 
 935 |           // Reset everything
 936 |           allResults = [];
 937 |           currentFilteredResults = [];
 938 |           resultsContainer.innerHTML = '';
 939 |           errorLog.innerHTML = '';
 940 | 
 941 |           // Reset filter dropdowns
 942 |           filterRepository.innerHTML = '<option value="">All</option>';
 943 |           filterDetector.innerHTML = '<option value="">All</option>';
 944 |           filterFileName.innerHTML = '<option value="">All</option>';
 945 | 
 946 |           // Rebuild local data + statuses
 947 |           data.forEach((item) => {
 948 |             if (!item._id) {
 949 |               // If somehow missing an ID, generate one
 950 |               item._id = 'id' + Math.random().toString(36).substr(2, 6);
 951 |             }
 952 |             statusesMap[item._id] = {
 953 |               Verified: !!item.Verified,
 954 |               Rejected: !!item.Rejected
 955 |             };
 956 |             allResults.push(item);
 957 | 
 958 |             // Add filter options
 959 |             const repo = getNestedValue(item, 'SourceMetadata.Data.Github.repository');
 960 |             if (repo) addOptionIfNotExists(filterRepository, repo);
 961 | 
 962 |             const det = item.DetectorName;
 963 |             if (det) addOptionIfNotExists(filterDetector, det);
 964 | 
 965 |             const fName = item._uploadedFile;
 966 |             if (fName) addOptionIfNotExists(filterFileName, fName);
 967 |           });
 968 | 
 969 |           // Store statuses in localStorage
 970 |           storeStatuses();
 971 | 
 972 |           // Done, update UI
 973 |           updateStats();
 974 |           applyFilters();
 975 |           alert('Session loaded successfully!');
 976 |         } catch (err) {
 977 |           const errDiv = document.createElement('div');
 978 |           errDiv.classList.add('error-message');
 979 |           errDiv.textContent = `Error loading session file: ${err.message}`;
 980 |           errorLog.appendChild(errDiv);
 981 |         }
 982 |       };
 983 |       reader.readAsText(file);
 984 |     });
 985 |     /**************************************************************/
 986 | 
 987 |     function addOptionIfNotExists(selectEl, value) {
 988 |       for (let i = 0; i < selectEl.options.length; i++) {
 989 |         if (selectEl.options[i].value === value) return;
 990 |       }
 991 |       const opt = document.createElement('option');
 992 |       opt.value = value;
 993 |       opt.textContent = value;
 994 |       selectEl.appendChild(opt);
 995 |     }
 996 | 
 997 |     /**************************************************************
 998 |      * STORE STATUSES
 999 |      **************************************************************/
1000 |     function storeStatuses() {
1001 |       try {
1002 |         localStorage.setItem('thStatuses', JSON.stringify(statusesMap));
1003 |       } catch (e) {
1004 |         console.warn('Unable to store statuses:', e);
1005 |       }
1006 |     }
1007 | 
1008 |     /**************************************************************
1009 |      * UPDATE STATS
1010 |      **************************************************************/
1011 |     function updateStats() {
1012 |       totalFindingsSpan.textContent = allResults.length;
1013 | 
1014 |       const repos = new Set(
1015 |         allResults.map(r => getNestedValue(r, 'SourceMetadata.Data.Github.repository')).filter(Boolean)
1016 |       );
1017 |       uniqueRepositoriesSpan.textContent = repos.size;
1018 | 
1019 |       const dets = new Set(allResults.map(r => r.DetectorName).filter(Boolean));
1020 |       uniqueDetectorsSpan.textContent = dets.size;
1021 | 
1022 |       const files = new Set(allResults.map(r => r._uploadedFile).filter(Boolean));
1023 |       uniqueFilesSpan.textContent = files.size;
1024 | 
1025 |       const authors = new Set(
1026 |         allResults.map(r => getNestedValue(r, 'SourceMetadata.Data.Github.email')).filter(Boolean)
1027 |       );
1028 |       uniqueAuthorsSpan.textContent = authors.size;
1029 | 
1030 |       const timestamps = allResults
1031 |         .map(r => getNestedValue(r, 'SourceMetadata.Data.Github.timestamp'))
1032 |         .map(ts => ts ? new Date(ts).getTime() : null)
1033 |         .filter(x => x && !isNaN(x));
1034 |       if (timestamps.length) {
1035 |         const min = Math.min(...timestamps);
1036 |         const max = Math.max(...timestamps);
1037 |         firstSeenSpan.textContent = new Date(min).toLocaleDateString();
1038 |         lastSeenSpan.textContent = new Date(max).toLocaleDateString();
1039 |       } else {
1040 |         firstSeenSpan.textContent = 'N/A';
1041 |         lastSeenSpan.textContent = 'N/A';
1042 |       }
1043 | 
1044 |       const verifiedCount = allResults.filter(r => r.Verified).length;
1045 |       const unverifiedCount = allResults.filter(r => !r.Verified).length;
1046 |       verifiedCountSpan.textContent = verifiedCount;
1047 |       unverifiedCountSpan.textContent = unverifiedCount;
1048 | 
1049 |       const rejectedCount = allResults.filter(r => r.Rejected).length;
1050 |       rejectedCountSpan.textContent = rejectedCount;
1051 | 
1052 |       const total = verifiedCount + unverifiedCount;
1053 |       if (total === 0) {
1054 |         verificationBar.style.width = '0%';
1055 |       } else {
1056 |         const pct = (verifiedCount / total) * 100;
1057 |         verificationBar.style.width = pct.toFixed(1) + '%';
1058 |       }
1059 |     }
1060 | 
1061 |     /**************************************************************
1062 |      * FILTER & SORT & RENDER
1063 |      **************************************************************/
1064 |     [
1065 |       filterRepository, filterDetector, filterFileName, filterVerified, sortBy
1066 |     ].forEach(el => el.addEventListener('change', applyFilters));
1067 | 
1068 |     // Add regex filter with debouncing and visual feedback
1069 |     let regexTimeout;
1070 |     filterRegex.addEventListener('input', () => {
1071 |       clearTimeout(regexTimeout);
1072 |       regexTimeout = setTimeout(() => {
1073 |         applyFilters();
1074 |         // Add visual feedback if regex is active
1075 |         if (filterRegex.value.trim()) {
1076 |           filterRegex.classList.add('active-filter');
1077 |         } else {
1078 |           filterRegex.classList.remove('active-filter');
1079 |         }
1080 |       }, 300); // Debounce 300ms
1081 |     });
1082 | 
1083 |     function applyFilters() {
1084 |       const repoVal = filterRepository.value;
1085 |       const detVal = filterDetector.value;
1086 |       const fileVal = filterFileName.value;
1087 |       const verVal = filterVerified.value;
1088 |       const regexVal = filterRegex.value.trim();
1089 | 
1090 |       // Compile regex if provided
1091 |       let regexPattern = null;
1092 |       if (regexVal) {
1093 |         try {
1094 |           regexPattern = new RegExp(regexVal, 'i'); // Case-insensitive by default
1095 |         } catch (e) {
1096 |           console.warn('Invalid regex pattern:', e);
1097 |           regexPattern = null;
1098 |         }
1099 |       }
1100 | 
1101 |       let [startTime, endTime] = [null, null];
1102 |       if (selectedDateRange.length === 2 && selectedDateRange[0] && selectedDateRange[1]) {
1103 |         startTime = selectedDateRange[0].getTime();
1104 |         endTime = selectedDateRange[1].getTime();
1105 |         if (startTime > endTime) {
1106 |           const tmp = startTime;
1107 |           startTime = endTime;
1108 |           endTime = tmp;
1109 |         }
1110 |       }
1111 | 
1112 |       const filtered = allResults.filter(r => {
1113 |         // Hide rejected if toggled
1114 |         if (hideRejected && r.Rejected) return false;
1115 | 
1116 |         let verifiedMatch = true;
1117 |         if (verVal === 'true') verifiedMatch = (r.Verified === true);
1118 |         if (verVal === 'false') verifiedMatch = (r.Verified === false);
1119 | 
1120 |         const repoMatch = !repoVal || (getNestedValue(r, 'SourceMetadata.Data.Github.repository') === repoVal);
1121 |         const detMatch = !detVal || (r.DetectorName === detVal);
1122 |         const fileMatch = !fileVal || (r._uploadedFile === fileVal);
1123 | 
1124 |         const tsStr = getNestedValue(r, 'SourceMetadata.Data.Github.timestamp');
1125 |         const tsMs = tsStr ? new Date(tsStr).getTime() : null;
1126 |         const dateMatch = (!startTime || (tsMs && tsMs >= startTime)) &&
1127 |                           (!endTime || (tsMs && tsMs <= endTime));
1128 | 
1129 |         // Regex match on Raw field
1130 |         const regexMatch = !regexPattern || (r.Raw && regexPattern.test(r.Raw));
1131 | 
1132 |         return verifiedMatch && repoMatch && detMatch && fileMatch && dateMatch && regexMatch;
1133 |       });
1134 | 
1135 |       // Sort results
1136 |       const sortValue = sortBy.value;
1137 |       if (sortValue) {
1138 |         filtered.sort((a, b) => {
1139 |           const getTime = (item) => {
1140 |             const t = getNestedValue(item, 'SourceMetadata.Data.Github.timestamp');
1141 |             return t ? new Date(t).getTime() : 0;
1142 |           };
1143 |           const repoA = getNestedValue(a, 'SourceMetadata.Data.Github.repository') || '';
1144 |           const repoB = getNestedValue(b, 'SourceMetadata.Data.Github.repository') || '';
1145 | 
1146 |           switch (sortValue) {
1147 |             case 'dateAsc':    return getTime(a) - getTime(b);
1148 |             case 'dateDesc':   return getTime(b) - getTime(a);
1149 |             case 'repoAsc':    return repoA.localeCompare(repoB);
1150 |             case 'repoDesc':   return repoB.localeCompare(repoA);
1151 |             case 'verifiedAsc':
1152 |               // move verified to top => so the 'lowest' is unverified
1153 |               return (b.Verified ? 1 : 0) - (a.Verified ? 1 : 0);
1154 |             case 'verifiedDesc':
1155 |               // move unverified to top => so the 'lowest' is verified
1156 |               return (a.Verified ? 1 : 0) - (b.Verified ? 1 : 0);
1157 |             default:
1158 |               return 0;
1159 |           }
1160 |         });
1161 |       }
1162 | 
1163 |       currentFilteredResults = filtered;
1164 |       currentBatchIndex = 0;
1165 |       totalBatches = Math.ceil(filtered.length / windowBatchSize);
1166 |       renderCurrentBatch();
1167 |       updateFilteredCountDisplay();
1168 |     }
1169 | 
1170 |     function updateFilteredCountDisplay() {
1171 |       const start = currentBatchIndex * windowBatchSize + 1;
1172 |       const end = Math.min((currentBatchIndex + 1) * windowBatchSize, currentFilteredResults.length);
1173 |       filteredCountDisplay.textContent = `Showing ${start}-${end} / ${currentFilteredResults.length} filtered (${allResults.length} total)`;
1174 |     }
1175 | 
1176 |     function renderCurrentBatch() {
1177 |       resultsContainer.innerHTML = '';
1178 | 
1179 |       if (!currentFilteredResults.length) {
1180 |         resultsContainer.innerHTML = '<p>No results match the current filters.</p>';
1181 |         return;
1182 |       }
1183 | 
1184 |       const start = currentBatchIndex * windowBatchSize;
1185 |       const end = Math.min(start + windowBatchSize, currentFilteredResults.length);
1186 | 
1187 |       for (let i = start; i < end; i++) {
1188 |         const card = createResultCard(currentFilteredResults[i]);
1189 |         resultsContainer.appendChild(card);
1190 |       }
1191 | 
1192 |       addBatchNavigation();
1193 |     }
1194 | 
1195 |     function addBatchNavigation() {
1196 |       if (totalBatches <= 1) return;
1197 | 
1198 |       const nav = document.createElement('div');
1199 |       nav.style.cssText = 'display: flex; justify-content: center; gap: 10px; margin-top: 20px; align-items: center;';
1200 | 
1201 |       const prevBtn = document.createElement('button');
1202 |       prevBtn.className = 'btn btn-info';
1203 |       prevBtn.innerHTML = '<i class="bi bi-chevron-left"></i> Previous';
1204 |       prevBtn.disabled = currentBatchIndex === 0;
1205 |       prevBtn.onclick = () => {
1206 |         if (currentBatchIndex > 0) {
1207 |           currentBatchIndex--;
1208 |           renderCurrentBatch();
1209 |           updateFilteredCountDisplay();
1210 |           window.scrollTo(0, 0);
1211 |         }
1212 |       };
1213 | 
1214 |       const info = document.createElement('span');
1215 |       info.style.cssText = 'color: #666; font-weight: 500;';
1216 |       info.textContent = `Page ${currentBatchIndex + 1} of ${totalBatches}`;
1217 | 
1218 |       const nextBtn = document.createElement('button');
1219 |       nextBtn.className = 'btn btn-info';
1220 |       nextBtn.innerHTML = 'Next <i class="bi bi-chevron-right"></i>';
1221 |       nextBtn.disabled = currentBatchIndex >= totalBatches - 1;
1222 |       nextBtn.onclick = () => {
1223 |         if (currentBatchIndex < totalBatches - 1) {
1224 |           currentBatchIndex++;
1225 |           renderCurrentBatch();
1226 |           updateFilteredCountDisplay();
1227 |           window.scrollTo(0, 0);
1228 |         }
1229 |       };
1230 | 
1231 |       nav.appendChild(prevBtn);
1232 |       nav.appendChild(info);
1233 |       nav.appendChild(nextBtn);
1234 |       resultsContainer.appendChild(nav);
1235 |     }
1236 | 
1237 |     /**************************************************************
1238 |      * CREATE RESULT CARD
1239 |      **************************************************************/
1240 |     function createResultCard(result) {
1241 |       // By default, all cards are uncollapsed => no "collapsed" class initially
1242 |       const container = document.createElement('div');
1243 |       container.classList.add('result-container');
1244 | 
1245 |       // Header
1246 |       const header = document.createElement('div');
1247 |       header.classList.add('result-header');
1248 | 
1249 |       // Title
1250 |       const titleDiv = document.createElement('div');
1251 |       titleDiv.classList.add('title');
1252 |       titleDiv.textContent = `Finding ID: ${result._id}`;
1253 |       header.appendChild(titleDiv);
1254 | 
1255 |       // Action buttons (in header)
1256 |       const actionsDiv = document.createElement('div');
1257 |       actionsDiv.style.display = 'flex';
1258 |       actionsDiv.style.gap = '10px';
1259 | 
1260 |       const rejectBtn = document.createElement('button');
1261 |       rejectBtn.classList.add('btn', 'btn-danger');
1262 |       rejectBtn.innerHTML = '<i class="bi bi-x-circle"></i> &nbspReject';
1263 |       rejectBtn.title = "Reject this finding";
1264 |       rejectBtn.addEventListener('click', (e) => {
1265 |         e.stopPropagation();
1266 |         result.Rejected = true;
1267 |         statusesMap[result._id] = {
1268 |           Verified: result.Verified,
1269 |           Rejected: true
1270 |         };
1271 |         storeStatuses();
1272 |         updateStats();
1273 |         applyFilters();
1274 |       });
1275 |       actionsDiv.appendChild(rejectBtn);
1276 | 
1277 |       const verifyBtn = document.createElement('button');
1278 |       verifyBtn.classList.add('btn', 'btn-secondary');
1279 |       verifyBtn.innerHTML = '<i class="bi bi-check-circle"></i> &nbspVerify';
1280 |       verifyBtn.title = "Mark this finding as verified";
1281 |       verifyBtn.addEventListener('click', (e) => {
1282 |         e.stopPropagation();
1283 |         result.Verified = true;
1284 |         statusesMap[result._id] = {
1285 |           Verified: true,
1286 |           Rejected: result.Rejected
1287 |         };
1288 |         storeStatuses();
1289 |         updateStats();
1290 |         applyFilters();
1291 |       });
1292 |       actionsDiv.appendChild(verifyBtn);
1293 | 
1294 |       header.appendChild(actionsDiv);
1295 | 
1296 |       header.addEventListener('click', () => {
1297 |         container.classList.toggle('collapsed');
1298 |       });
1299 | 
1300 |       if (expandAllState) {
1301 |         container.classList.add('collapsed');
1302 |       }
1303 | 
1304 |       container.appendChild(header);
1305 | 
1306 |       // Collapsed summary line
1307 |       const summaryLine = document.createElement('div');
1308 |       summaryLine.classList.add('summary-line');
1309 |       const linkVal = getNestedValue(result, 'SourceMetadata.Data.Github.link')
1310 |         || getNestedValue(result, 'SourceMetadata.Data.Github.file')
1311 |         || 'N/A';
1312 |       const detVal = result.DetectorName || 'N/A';
1313 |       let rawShort = (result.Raw || '').slice(0, 50);
1314 |       if (rawShort.length === 50) rawShort += '...';
1315 |       summaryLine.innerHTML = `
1316 |         <strong>Detector:</strong> ${detVal} &mdash;
1317 |         <strong>Path:</strong> ${linkVal} &mdash;
1318 |         <strong>Snippet:</strong> ${rawShort}
1319 |       `;
1320 |       container.appendChild(summaryLine);
1321 | 
1322 |       // Full body
1323 |       const body = document.createElement('div');
1324 |       body.classList.add('result-body');
1325 | 
1326 |       // 1) Path
1327 |       body.appendChild(createDetail('Path:', linkVal.startsWith('http')
1328 |         ? `<a href="${linkVal}" target="_blank">${linkVal}</a>` : linkVal));
1329 | 
1330 |       // 2) File
1331 |       body.appendChild(createDetail('Uploaded File:', result._uploadedFile || 'N/A'));
1332 | 
1333 |       // 3) Repository
1334 |       const repoVal = getNestedValue(result, 'SourceMetadata.Data.Github.repository') || 'N/A';
1335 |       body.appendChild(createDetail('Repository:', repoVal));
1336 | 
1337 |       // 4) Commit
1338 |       const commitVal = getNestedValue(result, 'SourceMetadata.Data.Github.commit') || 'N/A';
1339 |       body.appendChild(createDetail('Commit:', commitVal));
1340 | 
1341 |       // 5) Date
1342 |       const timeVal = getNestedValue(result, 'SourceMetadata.Data.Github.timestamp') || 'N/A';
1343 |       body.appendChild(createDetail('Date:', timeVal));
1344 | 
1345 |       // 6) Author
1346 |       const authorVal = getNestedValue(result, 'SourceMetadata.Data.Github.email') || 'N/A';
1347 |       body.appendChild(createDetail('Author:', authorVal));
1348 | 
1349 |       // 7) Detector
1350 |       body.appendChild(createDetail('Detector:', detVal));
1351 | 
1352 |       // 8) DetectorDescription
1353 |       const descVal = result.DetectorDescription || 'N/A';
1354 |       body.appendChild(createDetail('Description:', descVal));
1355 | 
1356 |       // Verified
1357 |       const verifiedTag = result.Verified
1358 |         ? `<i class="bi bi-check-circle-fill"></i> <span class="tag tag-verified">Verified</span>`
1359 |         : `<i class="bi bi-x-circle-fill"></i> <span class="tag tag-unverified">Not Verified</span>`;
1360 |       body.appendChild(createDetail('Verified:', verifiedTag));
1361 | 
1362 |       // Rejected
1363 |       const rejectedTag = result.Rejected
1364 |         ? `<i class="bi bi-x-circle-fill"></i> <span class="tag tag-rejected">Rejected</span>`
1365 |         : 'No';
1366 |       body.appendChild(createDetail('Rejected:', rejectedTag));
1367 | 
1368 |       // Leaked Info - no expansion needed, scrolling handles it
1369 |       const leakedInfoDiv = document.createElement('div');
1370 |       leakedInfoDiv.classList.add('leaked-container');
1371 |       const rawVal = result.Raw || 'N/A';
1372 |       leakedInfoDiv.innerHTML = `<strong>Leaked Information:</strong>\n${rawVal}`;
1373 |       body.appendChild(leakedInfoDiv);
1374 | 
1375 |       container.appendChild(body);
1376 |       return container;
1377 |     }
1378 | 
1379 |     function createDetail(label, valueHTML) {
1380 |       const div = document.createElement('div');
1381 |       div.classList.add('result-detail');
1382 |       div.innerHTML = `<strong>${label}</strong> ${valueHTML}`;
1383 |       return div;
1384 |     }
1385 | 
1386 |     /**************************************************************
1387 |      * SHOW/HIDE REJECTED
1388 |      **************************************************************/
1389 |     toggleRejectedBtn.addEventListener('click', () => {
1390 |       hideRejected = !hideRejected;
1391 |       toggleRejectedBtn.innerHTML = hideRejected
1392 |         ? '<i class="bi bi-eye-slash"></i> Hide Rejected'
1393 |         : '<i class="bi bi-eye"></i> Show Rejected';
1394 |       applyFilters();
1395 |     });
1396 | 
1397 |     /**************************************************************
1398 |      * MASS UPDATE (Reject or Verify)
1399 |      **************************************************************/
1400 |     rejectAllBtn.addEventListener('click', () => {
1401 |       massUpdateFiltered({ Reject: true });
1402 |     });
1403 |     verifyAllBtn.addEventListener('click', () => {
1404 |       massUpdateFiltered({ Verify: true });
1405 |     });
1406 |     function massUpdateFiltered(action) {
1407 |       currentFilteredResults.forEach(r => {
1408 |         if (action.Reject) r.Rejected = true;
1409 |         if (action.Verify) r.Verified = true;
1410 |         statusesMap[r._id] = {
1411 |           Verified: r.Verified,
1412 |           Rejected: r.Rejected
1413 |         };
1414 |       });
1415 |       storeStatuses();
1416 |       updateStats();
1417 |       applyFilters();
1418 |     }
1419 | 
1420 |     /**************************************************************
1421 |      * EXPORT RESULTS (Verified, Filtered, etc.)
1422 |      **************************************************************/
1423 |     exportVerifiedBtn.addEventListener('click', () => {
1424 |       const verifiedOnly = allResults.filter(r => r.Verified);
1425 |       if (!verifiedOnly.length) {
1426 |         alert("No verified results to export!");
1427 |         return;
1428 |       }
1429 |       downloadJsonFile(verifiedOnly, "verified_findings.json");
1430 |     });
1431 | 
1432 |     exportFilteredBtn.addEventListener('click', () => {
1433 |       if (!currentFilteredResults.length) {
1434 |         alert("No filtered results to export!");
1435 |         return;
1436 |       }
1437 |       downloadJsonFile(currentFilteredResults, "filtered_findings.json");
1438 |     });
1439 | 
1440 |     function downloadJsonFile(dataArray, filename) {
1441 |       const blob = new Blob([JSON.stringify(dataArray, null, 2)], { type: 'application/json' });
1442 |       const url = URL.createObjectURL(blob);
1443 |       const a = document.createElement('a');
1444 |       a.href = url;
1445 |       a.download = filename;
1446 |       document.body.appendChild(a);
1447 |       a.click();
1448 |       document.body.removeChild(a);
1449 |       URL.revokeObjectURL(url);
1450 |     }
1451 | 
1452 |     /**************************************************************
1453 |      * NEW CODE: SAVE CURRENT SESSION
1454 |      * Exports the entire 'allResults' array (with statuses)
1455 |      **************************************************************/
1456 |     saveSessionBtn.addEventListener('click', () => {
1457 |       if (!allResults.length) {
1458 |         alert("No data loaded to save!");
1459 |         return;
1460 |       }
1461 |       // The entire array includes Verified/Rejected flags
1462 |       downloadJsonFile(allResults, "session_backup.json");
1463 |     });
1464 | 
1465 |     expandAllBtn.addEventListener('click', () => {
1466 |       expandAllState = !expandAllState;
1467 |       if (expandAllState) {
1468 |         expandAllBtn.innerHTML = '<i class="bi bi-arrows-expand"></i> Expand All';
1469 |       } else {
1470 |         expandAllBtn.innerHTML = '<i class="bi bi-arrows-collapse"></i> Collapse All';
1471 |       }
1472 |       renderCurrentBatch();
1473 |       updateFilteredCountDisplay();
1474 |     });
1475 | 
1476 |     /**************************************************************
1477 |      * CLEAR ALL FILTERS
1478 |      **************************************************************/
1479 |     clearFiltersBtn.addEventListener('click', () => {
1480 |       filterRepository.value = '';
1481 |       filterDetector.value = '';
1482 |       filterFileName.value = '';
1483 |       filterVerified.value = '';
1484 |       filterRegex.value = '';
1485 |       filterRegex.classList.remove('active-filter'); // Remove visual feedback
1486 |       sortBy.value = '';
1487 | 
1488 |       selectedDateRange = [null, null];
1489 |       const dateInput = document.getElementById('filterDateRange');
1490 |       if (dateInput._flatpickr) {
1491 |         dateInput._flatpickr.clear();
1492 |       }
1493 | 
1494 |       applyFilters();
1495 |     });
1496 | 
1497 |     /**************************************************************
1498 |      * HELPER: getNestedValue
1499 |      **************************************************************/
1500 |     function getNestedValue(obj, path) {
1501 |       if (!obj) return undefined;
1502 |       return path.split('.').reduce((acc, part) => acc && acc[part], obj);
1503 |     }
1504 |   </script>
1505 | </body>
1506 | </html>
1507 | 


--------------------------------------------------------------------------------