Remove TTS timeout, replace with date time checking

src/App.vue

···
 // A lot of initial code structure jacked from Julie
 // https://tangled.org/strings/juli.ee/3m2vdj7abbf22
 // My implementation focuses on making it "Vueish" and implementing TTS
-import { ref, onMounted } from "vue"
+import { ref, onMounted, computed } from "vue"
 import type { Ref } from "vue"
 import { verifyStreamplaceDid, type VerificationResult } from "./composables/useDidVerification"
 
···
   parseString
 )
 
-const ttsTimeout = getParam(
-  'ttsTimeout',
-  'VITE_TTS_TIMEOUT',
-  3000,
-  parsePositiveNumber
-)
+// Removed VITE_TTS_TIMEOUT - now using VITE_CHAT_LIFE age check instead
 
 const repeatUsernames = getParam(
   'repeatUsernames',
···
   console.warn('VITE_STREAMPLACE_DID not set or invalid. Websocket connection may fail.')
 }
 
-console.log(`Starting websocket with username ${streamplaceUsername} and TTS timeout ${ttsTimeout}ms`)
+console.log(`Starting websocket with username ${streamplaceUsername}. Messages older than ${chatLifespan.value}s will be filtered.`)
 
 // TODO enum this
 const websocketStatus = ref<string>('not connected')
···
 
 const lastChatter = ref<string>("")
 
-// TODO replace with debouncer that waits 100ms or so between initial payload of messageView objects
 const enableTTS = ref(false)
 
-type ChatMessages = Ref<Map<number, ChatPayload>>;
-
-const initialChats = ref<ChatMessages>(new Map())
+type ChatMessages = Map<number, ChatPayload>
 
 const chatMessages = ref<ChatMessages>(new Map())
 
+// Convert import.meta.env to an array of [key, value] pairs for display
+const envVars = computed(() => {
+  return Object.entries(import.meta.env)
+    .filter(([key]) => key.startsWith('VITE_'))
+    .sort((a, b) => a[0].localeCompare(b[0]))
+})
+
 onMounted(async () => {
   try {
     const response = await fetch('/api/voices')
···
 
     ws.onopen = () => {
       websocketStatus.value = "connected"
-      setTimeout(() => {
-        chatMessages.value = new Map([...initialChats.value.entries()].sort((a, b) => a[0] - b[0]))
-        enableTTS.value = true
-        console.log("enabled TTS")
-      }, ttsTimeout)
+      enableTTS.value = true
+      console.log("TTS enabled - filtering messages by age")
     }
 
     ws.onmessage = (event) => {
···
 }
 
 function addChatLine(author: string, message: string, color: Color, createdAt: string, chatTime: number) {
-  if (!enableTTS.value) {
-    initialChats.value.set(chatTime, {
-      handle: author,
-      message: message,
-      color: color,
-      created: createdAt
-    });
-  } else {
-    chatMessages.value.set(chatTime, {
-      handle: author,
-      message: message,
-      color: color,
-      created: createdAt
-    });
-  }
+  chatMessages.value.set(chatTime, {
+    handle: author,
+    message: message,
+    color: color,
+    created: createdAt
+  })
   setTimeout(() => {
     chatMessages.value.delete(chatTime)
   }, chatLifespan.value * 1000)
···
 
 // TODO i _think_ i'm calling this too often. i already removed it fro mws.onerror, but maybe it also doesn't need to be called in the catch on the websocket try?
 function connectionRestartExponentialBackoff() {
-  enableTTS.value = false // We need to disable TTS, otherwise on reconnect we'll get a flood of audio
+  enableTTS.value = false
   websocketStatus.value = "disconnected"
   failures += 1
   const delay = 3000 * Math.pow(2, Math.min(failures - 1, 5))
···
   </div>
   <div id="settingsContainer" v-if="showSettingsButton">
     <div id="settingsUI">
+      <div class="optionRow">
+        <h1>Status</h1>
+        <div class="option">
+          <ul>
+            <li v-for="[key, value] in envVars" :key="key">
+              <strong>{{ key }}:</strong> {{ value }}
+            </li>
+          </ul>
+        </div>
+      </div>
       <div class="option">
         <h1>Default Voice Select</h1>
         <select name="model" v-model="voiceSelector">
···
       </div>
       <div class="option">
         <h1>Websocket Status</h1>
-        <h2>User: {{ streamplaceUsername }}</h2>
+        <h2>Configured 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 }}
+          ✓ Verified: {{ verificationStatus.profile?.handle }}
         </h2>
         <h2 v-else-if="verificationStatus && !verificationStatus.isValid" style="color: #f87171;">
           ✗ {{ verificationStatus.error }}