<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AllTheServices KMS Enclave</title>
  <meta name="description" content="AllTheServices Key Management System Enclave">
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="stylesheet" href="enclave.cc049c8d.css" integrity="sha384-Q+kGrawoPBZ2Gb/8h7lOB+rHrWehTXPRBo9mgERSHon8RSIwNXUunJ+HORhhPEKN" crossorigin="anonymous">
</head>
<body>
  <!-- Iframe Status Display (shown when embedded in iframe) -->
  <div class="enclave-status">
    <div class="header">
      <img src="logo.png" alt="AllTheServices" class="logo">
      <h1>AllTheServices KMS Enclave</h1>
    </div>
    <div class="verification-badge">
      <a href="https://github.com/Lukium/ats-kms-enclave/tree/attestation" target="_blank" rel="noopener noreferrer">
        <img src="https://raw.githubusercontent.com/Lukium/ats-kms-enclave/attestation/verification-badge.svg" alt="KMS Verification Status" />
      </a>
    </div>
    <p><span class="status">Active</span> - Worker loaded and ready</p>
    <div>
      <strong>Worker Hash:</strong>
      <div class="hash">78f9a3c36c64faa58be9d19d4fdb91488e5fc8a22907c244865f07772f998596</div>
    </div>
    <p class="description">
      This iframe runs in a sandboxed cross-origin context.
      All cryptographic operations are isolated from the parent PWA.
    </p>
  </div>

  <!-- Unlock Modal (shown in popup window for unlock) -->
  <div id="unlock-modal" class="kms-modal hidden">
    <div class="kms-modal-backdrop"></div>
    <div class="kms-modal-content">
      <div class="kms-modal-header">
        <h3>🔐 Unlock KMS</h3>
        <p class="kms-modal-subtitle">Choose your unlock method</p>
      </div>

      <div class="kms-modal-body">
        <!-- WebAuthn Option -->
        <div class="kms-auth-option" id="kms-unlock-passkey-option">
          <button id="kms-webauthn-btn" class="kms-auth-btn kms-primary">
            <span class="kms-auth-icon">🔑</span>
            <span class="kms-auth-label">Use Passkey</span>
          </button>
          <p class="kms-auth-hint">Authenticate with your device biometrics</p>
        </div>

        <!-- Divider (shown only when BOTH passkey and passphrase are offered) -->
        <div class="kms-divider" id="kms-unlock-divider">
          <span>or</span>
        </div>

        <!-- Passphrase Option -->
        <div class="kms-auth-option" id="kms-unlock-passphrase-option">
          <form id="kms-unlock-form">
            <input type="text" name="username" autocomplete="username" class="kms-hidden-username" value="kms-user" readonly />
            <label for="kms-passphrase-input" class="kms-input-label">Passphrase</label>
            <input
              type="password"
              id="kms-passphrase-input"
              name="password"
              class="kms-input"
              placeholder="Enter your passphrase"
              autocomplete="current-password"
            />
            <button id="kms-passphrase-btn" type="button" class="kms-auth-btn kms-secondary">
              <span class="kms-auth-icon">🔐</span>
              <span class="kms-auth-label">Unlock with Passphrase</span>
            </button>
          </form>
        </div>

        <!-- Error Display -->
        <div id="kms-modal-error" class="kms-modal-error hidden"></div>

        <!-- Loading State -->
        <div id="kms-modal-loading" class="kms-modal-loading hidden">
          <span class="kms-spinner"></span>
          <span>Unlocking...</span>
        </div>

        <!-- Unlock Success (post-unlock confirmation + auto-close footer injected by JS) -->
        <div id="kms-unlock-success" class="kms-setup-success hidden">
          <div class="kms-success-content">
            <span class="kms-success-icon">✅</span>
            <div>
              <div class="kms-success-title">Messaging Unlocked</div>
              <div class="kms-success-message">You can return to the app.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Recovery-phrase backup ceremony (BUG-007; shown in the popup after a fresh
       account root is minted). Two steps: reveal, then a separate hidden-words
       confirm. Word lists + inputs are built by client.ts. -->
  <div id="mnemonic-modal" class="kms-modal hidden">
    <div class="kms-modal-backdrop"></div>
    <div class="kms-modal-content">
      <div class="kms-modal-header">
        <h3>🔑 Back up your recovery phrase</h3>
        <p class="kms-modal-subtitle">These 12 words restore your messages if you lose this device. Write them down in order; keep them private.</p>
      </div>
      <div class="kms-modal-body">
        <!-- Step 1: reveal -->
        <div id="kms-mnemonic-reveal">
          <ol id="kms-mnemonic-words" class="kms-mnemonic-grid"></ol>
          <div class="kms-mnemonic-warning">⚠️ Anyone with these words can read your messages. We can't recover them for you.</div>
          <div class="kms-mnemonic-actions">
            <button id="kms-mnemonic-copy" type="button" class="kms-auth-btn kms-secondary">Copy</button>
            <button id="kms-mnemonic-continue" type="button" class="kms-auth-btn kms-primary">I've saved it — continue</button>
            <button id="kms-mnemonic-cancel" type="button" class="kms-auth-btn kms-tertiary">Cancel</button>
          </div>
        </div>
        <!-- Step 2: confirm (words hidden) -->
        <div id="kms-mnemonic-confirm" class="hidden">
          <p class="kms-mnemonic-confirm-hint">Enter the highlighted words to confirm you saved them. You can paste the whole phrase.</p>
          <div id="kms-mnemonic-confirm-grid" class="kms-mnemonic-grid"></div>
          <div id="kms-mnemonic-confirm-error" class="kms-modal-error hidden"></div>
          <div class="kms-mnemonic-actions">
            <button id="kms-mnemonic-back" type="button" class="kms-auth-btn kms-tertiary">Back</button>
            <button id="kms-mnemonic-verify" type="button" class="kms-auth-btn kms-primary">Verify &amp; finish</button>
          </div>
        </div>
        <!-- Finishing state (after confirm, while the worker persists) -->
        <div id="kms-mnemonic-finishing" class="kms-modal-loading hidden">
          <span class="kms-spinner"></span>
          <span>Finishing setup…</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Connect Modal (rooms-and-trust §3.2/§3.4) — mint (share a link) / accept (paste a link).
       The room secret lives ONLY in this enclave popup: the mint blob is rendered here and
       the accepted blob is entered here; neither ever reaches the PWA. -->
  <div id="connect-modal" class="kms-modal hidden">
    <div class="kms-modal-backdrop"></div>
    <div class="kms-modal-content">
      <div class="kms-modal-header">
        <h3 id="kms-connect-title">🔗 Connect</h3>
        <p class="kms-modal-subtitle" id="kms-connect-subtitle">Preparing…</p>
      </div>
      <div class="kms-modal-body">
        <!-- Share (mint): show the link to send out-of-band -->
        <div id="kms-connect-share" class="hidden">
          <p class="kms-connect-hint">Have them scan this code in person, or send the link below over a channel you trust (a call, a message). Either way, they open it to connect back to you.</p>
          <div id="kms-connect-qr" class="kms-connect-qr"></div>
          <textarea id="kms-connect-link" class="kms-connect-link" readonly rows="3"></textarea>
          <div id="kms-connect-expiry" class="kms-connect-meta"></div>
          <div class="kms-mnemonic-actions">
            <button id="kms-connect-copy" type="button" class="kms-auth-btn kms-secondary">Copy link</button>
            <button id="kms-connect-done" type="button" class="kms-auth-btn kms-primary">Done</button>
          </div>
        </div>
        <!-- Accept: scan the other person's QR in person, or paste a link -->
        <div id="kms-connect-accept" class="hidden">
          <p class="kms-connect-hint">Scan the other person's invite QR in person, or paste the link they sent you.</p>
          <div id="kms-connect-scan" class="kms-connect-scan hidden">
            <video id="kms-connect-video" class="kms-connect-video" playsinline muted></video>
          </div>
          <div id="kms-connect-scan-status" class="kms-connect-meta"></div>
          <div class="kms-mnemonic-actions">
            <button id="kms-connect-scan-btn" type="button" class="kms-auth-btn kms-secondary">📷 Scan QR code</button>
          </div>
          <textarea id="kms-connect-paste" class="kms-connect-link" rows="3" placeholder="https://kms.ats.run/connect#…"></textarea>
          <div id="kms-connect-paste-error" class="kms-modal-error hidden"></div>
          <div class="kms-mnemonic-actions">
            <button id="kms-connect-cancel" type="button" class="kms-auth-btn kms-tertiary">Cancel</button>
            <button id="kms-connect-check" type="button" class="kms-auth-btn kms-primary">Continue</button>
          </div>
        </div>
        <!-- Accept (confirm): mutual confirmation — compare the safety number -->
        <div id="kms-connect-confirm" class="hidden">
          <p class="kms-connect-hint">Connect with this person? Compare the safety number with them over a trusted channel to be sure it's really them — the name is only a hint.</p>
          <div class="kms-connect-peer">
            <div id="kms-connect-peer-name" class="kms-connect-peer-name"></div>
            <code id="kms-connect-peer-fp" class="kms-connect-fp"></code>
          </div>
          <div class="kms-mnemonic-actions">
            <button id="kms-connect-confirm-back" type="button" class="kms-auth-btn kms-tertiary">Back</button>
            <button id="kms-connect-confirm-connect" type="button" class="kms-auth-btn kms-primary">Connect</button>
          </div>
        </div>
        <!-- Finishing state (worker processing) -->
        <div id="kms-connect-finishing" class="kms-modal-loading hidden">
          <span class="kms-spinner"></span>
          <span>Finishing…</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Setup Modal (shown in popup window for setup) -->
  <div id="setup-modal" class="kms-modal hidden">
    <div class="kms-modal-backdrop"></div>
    <div class="kms-modal-content">
      <div class="kms-modal-header">
        <h3>🔐 Setup KMS Authentication</h3>
        <p class="kms-modal-subtitle">Choose your authentication method</p>
      </div>

      <div class="kms-modal-body">
        <!-- WebAuthn Setup Option -->
        <div class="kms-auth-option">
          <button id="kms-setup-webauthn-btn" class="kms-auth-btn kms-primary">
            <span class="kms-auth-icon">🔑</span>
            <span class="kms-auth-label">Setup Passkey</span>
          </button>
          <p class="kms-auth-hint">Register your device biometrics</p>
        </div>

        <!-- Divider -->
        <div class="kms-divider">
          <span>or</span>
        </div>

        <!-- Passphrase Setup Option -->
        <div class="kms-auth-option">
          <form id="kms-setup-form">
            <input type="text" name="username" autocomplete="username" class="kms-hidden-username" value="kms-user" readonly />
            <label for="kms-setup-passphrase-input" class="kms-input-label">Create Passphrase</label>
            <input
              type="password"
              id="kms-setup-passphrase-input"
              name="new-password"
              class="kms-input"
              placeholder="Enter a strong passphrase (min 12 chars)"
              autocomplete="new-password"
            />
            <div id="kms-passphrase-char-count" class="kms-char-count">
              0 / 12 characters
            </div>
            <label for="kms-setup-passphrase-confirm-input" class="kms-input-label">Confirm Passphrase</label>
            <input
              type="password"
              id="kms-setup-passphrase-confirm-input"
              name="new-password"
              class="kms-input"
              placeholder="Re-enter your passphrase"
              autocomplete="new-password"
            />
            <div id="kms-passphrase-match-feedback" class="kms-match-feedback hidden">
              <!-- Feedback will be inserted here dynamically -->
            </div>
            <button id="kms-setup-passphrase-btn" type="button" class="kms-auth-btn kms-secondary">
              <span class="kms-auth-icon">🔐</span>
              <span class="kms-auth-label">Setup with Passphrase</span>
            </button>
          </form>
        </div>

        <!-- Error Display -->
        <div id="kms-setup-error" class="kms-modal-error hidden"></div>

        <!-- Loading State -->
        <div id="kms-setup-loading" class="kms-modal-loading hidden">
          <span class="kms-spinner"></span>
          <span>Setting up...</span>
        </div>

        <!-- Success State -->
        <div id="kms-setup-success" class="kms-setup-success hidden">
          <div class="kms-success-content">
            <span class="kms-success-icon">✅</span>
            <div>
              <div class="kms-success-title">Setup Complete!</div>
              <div class="kms-success-message">You can now close this window and return to the main app.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="module" src="enclave-client.f0885d88.js" integrity="sha384-KRE7tb0O5e2JmX7m8tkBgj9da9L+9/1U3x8w5ZBxSPRgkrtK2P9ZAmurkCTGgeQe" crossorigin="anonymous"></script>
</body>
</html>