Implement DID verifcation

Verifies the DID is real on startup before connecting to any websockets

src/App.vue

···
 // My implementation focuses on making it "Vueish" and implementing TTS
 import { ref, onMounted } from "vue"
 import type { Ref } from "vue"
+import { verifyStreamplaceDid, type VerificationResult } from "./composables/useDidVerification"
 
 type Color = {
   red: number,
···
 
 // TODO enum this
 const websocketStatus = ref<string>('not connected')
+const verificationStatus = ref<VerificationResult | null>(null)
+const isVerifying = ref(false)
 
 const voices = ref<Array<string>>([])
 const voiceSelector = ref<string | null>(null)
···
 
 let failures = 0
 
+async function verifyAndConnect() {
+  if (!streamplaceUsername) {
+    verificationStatus.value = {
+      isValid: false,
+      profile: null,
+      error: "No username configured"
+    }
+    websocketStatus.value = "error: no username"
+    return
+  }
+
+  isVerifying.value = true
+  websocketStatus.value = "verifying username"
+
+  try {
+    const result = await verifyStreamplaceDid(streamplaceUsername)
+    verificationStatus.value = result
+
+    if (result.isValid) {
+      console.log(`Verified user: ${result.profile?.handle} (${result.profile?.did})`)
+      if (result.profile?.displayName) {
+        console.log(`Display name: ${result.profile.displayName}`)
+      }
+      startChat()
+    } else {
+      websocketStatus.value = `error: ${result.error}`
+      console.error(`Username verification failed: ${result.error}`)
+    }
+  } catch (err) {
+    console.error("Verification error:", err)
+    verificationStatus.value = {
+      isValid: false,
+      profile: null,
+      error: "Verification failed"
+    }
+    websocketStatus.value = "error: verification failed"
+  } finally {
+    isVerifying.value = false
+  }
+}
+
 function startChat() {
   websocketStatus.value = "connecting"
 
···
   failures += 1
   const delay = 3000 * Math.pow(2, Math.min(failures - 1, 5))
   console.log(`reconnecting in ${delay}ms`)
+  // Skip verification on reconnect since we already verified
   setTimeout(startChat, delay)
 }
 
···
   }, 5000)
 }
 
-startChat()
+verifyAndConnect()
 </script>
 
 <template>
···
       </div>
       <div class="option">
         <h1>Websocket Status</h1>
-        <h2>User {{ streamplaceUsername }}</h2>
-        <h2>{{ websocketStatus }}</h2>
+        <h2>User: {{ streamplaceUsername }}</h2>
+        <h2 v-if="isVerifying">Verifying...</h2>
+        <h2 v-else-if="verificationStatus?.isValid" style="color: #4ade80;">
+          ✓ Verified: {{ verificationStatus.profile?.displayName || verificationStatus.profile?.handle }}
+        </h2>
+        <h2 v-else-if="verificationStatus && !verificationStatus.isValid" style="color: #f87171;">
+          ✗ {{ verificationStatus.error }}
+        </h2>
+        <h2>Status: {{ websocketStatus }}</h2>
+        <p v-if="verificationStatus?.profile?.did" style="font-size: 0.8rem; color: #9ca3af;">
+          DID: {{ verificationStatus.profile.did }}
+        </p>
       </div>
     </div>
   </div>