Implement Client-Side SHA-256 for Duplicate Detection

[josiah-nelson]

Overview

Implement client-side SHA-256 hashing to provide immediate duplicate detection before uploading modules to the backend. This improves user experience by preventing unnecessary uploads and provides instant feedback.

Current State

• Backend computes SHA-256 during module save
• Backend detects duplicates via unique index on sha256 column
• Frontend has no pre-check capability
• Users must wait for backend response to know if module is duplicate
• TODO comment: "Compute sha256 in browser for immediate duplicate checks"

Benefits

1. Instant Feedback - User knows immediately if module already exists
2. Reduced Network Traffic - No need to upload duplicate EEPROM data
3. Better UX - Can show "Already in library" before clicking save
4. Module Comparison - Enable comparing modules before deciding to save
5. Community Deduplication - Check against community index before submitting

Proposed Solution

Use Web Crypto API

Modern browsers provide crypto.subtle.digest() for SHA-256 hashing:

async function computeSHA256(arrayBuffer) {
    const hashBuffer = await crypto.subtle.digest('SHA-256', arrayBuffer);
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
    return hashHex;
}

Implementation Phases

Phase 1: Basic Duplicate Detection

• Compute SHA-256 when EEPROM is captured
• Check against local modules list (already loaded)
• Display warning if duplicate found
• Allow user to save anyway (with confirmation)

Phase 2: Enhanced UI

• Show computed SHA-256 in module info display
• Add "fingerprint" icon next to duplicate modules
• Highlight matching module in library if duplicate
• Show "Jump to existing" link for duplicates

Phase 3: Community Integration

• Check SHA-256 against community index
• Show "This module is in community library" message
• Provide option to import community metadata
• Skip submission if already in community repo

Implementation Tasks

Frontend

• Add computeSHA256() utility function
• Compute hash when EEPROM data is received
• Store hash with rawEepromData in memory
• Display SHA-256 in module info area
• Check hash against loaded modules list
• Show duplicate warning UI element
• Add confirmation dialog for duplicate save
• Link to existing module in library
• Test in all supported browsers
• Add loading indicator during hash computation
• Handle errors gracefully

UI Mockup

┌─────────────────────────────────────────┐
│ Module Information                      │
├─────────────────────────────────────────┤
│ Vendor:  CISCO-OEM                      │
│ Model:   SFP-H10GB-CU1M                 │
│ Serial:  ABC12345                       │
│ SHA-256: abc123...def789                │
│                                         │
│ ⚠️  This module already exists in your │
│     library as "Cisco 10G Copper #1"   │
│                                         │
│ [View Existing]  [Save Anyway]          │
└─────────────────────────────────────────┘

Browser Compatibility

Web Crypto API is supported in:

• ✅ Chrome 37+
• ✅ Firefox 34+
• ✅ Safari 11+
• ✅ Edge 79+
• ✅ All modern browsers

Fallback for older browsers:

• Use library like js-sha256 if needed
• Show warning if crypto API unavailable

Acceptance Criteria

• SHA-256 is computed client-side for all EEPROM data
• Hash is displayed in the UI
• Duplicate detection works before save
• User can proceed to save duplicate if desired
• Performance is acceptable (< 100ms for 512-byte EEPROM)
• Works in all supported browsers
• Graceful fallback or error if crypto API unavailable
• Documentation updated

Technical Notes

Performance

• SHA-256 on 256-512 bytes is nearly instant (<10ms)
• No performance concerns for typical use case
• Can use Web Workers for very large datasets (future)

Security

• Client-side hashing is for convenience, not security
• Backend still computes and verifies hash
• Don't rely on client hash for security decisions

Module Matching

Current approach in backend:

digest = hashlib.sha256(eeprom_data).hexdigest()
cursor.execute("SELECT id FROM sfp_modules WHERE sha256 = ?", (digest,))

Frontend will mimic this logic:

1. Compute SHA-256 of captured EEPROM
2. Compare against modules.map(m => m.sha256) (from loaded list)
3. Show match if found

Dependencies

None - Web Crypto API is built into browsers

Priority

Low-Medium - Nice QOL improvement but not critical

Labels

enhancement, frontend, good-first-issue

Example Code

// In handleNotifications() after receiving EEPROM:
async function onEepromReceived(arrayBuffer) {
    rawEepromData = arrayBuffer;
    
    // Compute SHA-256
    const sha256 = await computeSHA256(arrayBuffer);
    console.log('Module SHA-256:', sha256);
    
    // Check for duplicates
    const existingModule = loadedModules.find(m => m.sha256 === sha256);
    if (existingModule) {
        showDuplicateWarning(existingModule);
    }
    
    parseAndDisplaySfpData(arrayBuffer);
    document.getElementById('saveModuleButton').disabled = false;
}

function showDuplicateWarning(existingModule) {
    const warning = document.getElementById('duplicateWarning');
    warning.innerHTML = `
        ⚠️ This module already exists as "${existingModule.name}"
        <a href="#" onclick="scrollToModule(${existingModule.id})">View Existing</a>
    `;
    warning.classList.remove('hidden');
}