wirecore / public / diagnostic.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wirecore Diagnostics</title>
  <style>
    body {
      font-family: monospace;
      padding: 20px;
      max-width: 900px;
      margin: 0 auto;
      background: #1a1a1a;
      color: #eee;
    }
    h1 { color: #10b981; }
    h2 { color: #3b82f6; margin-top: 30px; }
    pre {
      background: #2a2a2a;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto;
      border-left: 3px solid #10b981;
    }
    button {
      background: #10b981;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      margin: 10px 5px;
    }
    button:hover {
      background: #059669;
    }
    .error {
      color: #ef4444;
    }
    .warning {
      color: #f59e0b;
    }
    .success {
      color: #10b981;
    }
  </style>
</head>
<body>
  <h1>🔍 Wirecore Browser Diagnostics</h1>

  <button onclick="checkIdentity()">Check Identity</button>
  <button onclick="checkStorage()">Check Storage</button>
  <button onclick="checkP2P()">Check P2P</button>
  <button onclick="clearAll()">Clear All Data</button>

  <div id="output"></div>

  <script type="module">
    import { apds } from './apds-compat.js'

    await apds.start()

    window.checkIdentity = async function() {
      const output = document.getElementById('output')
      output.innerHTML = '<h2>Identity Check</h2>'

      try {
        const keypair = await apds.keypair()
        const pubkey = await apds.pubkey()
        const name = await apds.get('name')

        output.innerHTML += `
          <pre>
<span class="success">✓ Keypair exists</span>
Length: ${keypair?.length || 'NULL'}
Public Key: ${pubkey || 'NULL'}
Name: ${name || 'NULL'}

First 8 chars: ${pubkey?.substring(0, 8) || 'N/A'}...
          </pre>
        `
      } catch (err) {
        output.innerHTML += `<pre class="error">Error: ${err.message}</pre>`
      }
    }

    window.checkStorage = async function() {
      const output = document.getElementById('output')
      output.innerHTML = '<h2>IndexedDB Storage</h2>'

      try {
        const db = await indexedDB.open('wirecore', 1)
        const transaction = db.transaction(['identity'], 'readonly')
        const store = transaction.objectStore('identity')

        const getAllRequest = store.getAllKeys()

        getAllRequest.onsuccess = async () => {
          const keys = getAllRequest.result
          output.innerHTML += `<pre>Stored keys: ${keys.length}\n\n`

          for (const key of keys) {
            const getRequest = store.get(key)
            getRequest.onsuccess = () => {
              const value = getRequest.result
              const preview = typeof value === 'string'
                ? (value.length > 100 ? value.substring(0, 100) + '...' : value)
                : JSON.stringify(value)

              output.innerHTML += `\n<span class="success">${key}</span>: ${preview}\n`
            }
          }

          output.innerHTML += '</pre>'
        }
      } catch (err) {
        output.innerHTML += `<pre class="error">Error: ${err.message}</pre>`
      }
    }

    window.checkP2P = async function() {
      const output = document.getElementById('output')
      output.innerHTML = '<h2>P2P / Trystero Status</h2>'

      const transport = window.trysteroTransport

      if (!transport) {
        output.innerHTML += `<pre class="error">✗ trysteroTransport is NULL
This means Trystero hasn't been initialized.
Check browser console for errors during init.</pre>`
        return
      }

      const peerCount = transport.getPeerCount()
      const stats = transport.getStats()
      const hasRoom = !!transport.room

      output.innerHTML += `
        <pre>
<span class="${hasRoom ? 'success' : 'error'}">${hasRoom ? '✓' : '✗'} Room: ${hasRoom ? 'ACTIVE' : 'NOT JOINED'}</span>
<span class="${peerCount > 0 ? 'success' : 'warning'}">${peerCount > 0 ? '✓' : '⚠'} Peers: ${peerCount}</span>

Stats:
  Sent: ${stats.sent}
  Received: ${stats.received}
  Pending Requests: ${stats.pendingRequests}

Peer IDs:
${Array.from(transport.peers).map(p => `  - ${p}`).join('\n') || '  (none)'}
        </pre>
      `
    }

    window.clearAll = async function() {
      if (!confirm('This will DELETE all your identity data and profile pictures. Continue?')) {
        return
      }

      const output = document.getElementById('output')
      output.innerHTML = '<h2>Clearing Data...</h2>'

      try {
        // Clear IndexedDB
        await indexedDB.deleteDatabase('wirecore')

        output.innerHTML += `<pre class="success">✓ Cleared IndexedDB

Refresh the page to generate a new identity.</pre>`
      } catch (err) {
        output.innerHTML += `<pre class="error">Error: ${err.message}</pre>`
      }
    }

    // Auto-run checks on load
    setTimeout(() => {
      checkIdentity()
      setTimeout(() => checkP2P(), 1000)
    }, 500)
  </script>
</body>
</html>