From c73393049bfd26b36916422baeab323c02a8fd12 Mon Sep 17 00:00:00 2001
From: aewing <aewing@cardoza.construction>
Date: Sat, 10 Jan 2026 20:04:07 +0000
Subject: [PATCH] Fix container injection: remove duplicate HTML and restore
 CONTAINERS + initializeContainers()

---
 index.html | 372 ++---------------------------------------------------
 1 file changed, 12 insertions(+), 360 deletions(-)

diff --git a/index.html b/index.html
index b4bb29c..829bae5 100644
--- a/index.html
+++ b/index.html
@@ -34,15 +34,8 @@
     v1.0.0-alpha3
   </div>
 
-  <!-- Containers injected by initialization function -->
-  <div id="containerHost"></div>
-
-  <!-- Utilities Container: Reusable components displayed in various views -->
-  <div id="utilitiesContainer" class="hidden fixed inset-0 flex items-center justify-center z-50 bg-black/50">
-    <div id="utilityComponentHost" class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full p-6 max-h-[90vh] overflow-y-auto">
-      <!-- Components dynamically inserted here -->
-    </div>
-  </div>
+  <!-- Container host for dynamic injection -->
+  <div id="containerHost" class="flex flex-col items-center justify-center w-full h-full"></div>
 
   <script src="https://cdn.jsdelivr.net/npm/pocketbase/dist/pocketbase.umd.js"></script>
   <script>
@@ -70,296 +63,24 @@
     let searchSilenceTimer = null;
 
     // ============================================================
-    // CONTAINER TEMPLATES
-    // These are organized as template literals for independent updates
+    // CONTAINER TEMPLATES - Organized as template literals
     // Intent: Migrate to separate files (containers/) when project matures
-    // Status: Option 1 - Template Literals (current)
-    // Future: Option 2 - Separate files with server routes
+    // Status: Option 1 - Template Literals (in-file for active development)
     // ============================================================
-
     const CONTAINERS = {
-      login: `<div id="loginContainer" class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8">
-        <div class="text-center mb-8">
-          <h1 class="text-4xl font-bold text-gray-800 mb-2">PB + Microsoft Graph</h1>
-          <p class="text-gray-600">Sign in with Microsoft</p>
-        </div>
-        <div class="space-y-6">
-          <p class="text-gray-700 text-center">Sign in with your Microsoft account</p>
-          <button type="button" id="loginBtn" class="w-full py-3 px-4 bg-gradient-to-br from-primary to-secondary text-white font-semibold rounded-lg hover:opacity-95 transition-opacity shadow-lg hover:shadow-xl">
-            Login with Microsoft
-          </button>
-        </div>
-        <div id="loginError" class="hidden mt-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm"></div>
-      </div>`,
+      login: `<div id="loginContainer" class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8"><div class="text-center mb-8"><h1 class="text-4xl font-bold text-gray-800 mb-2">PB + Microsoft Graph</h1><p class="text-gray-600">Sign in with Microsoft</p></div><div class="space-y-6"><p class="text-gray-700 text-center">Sign in with your Microsoft account</p><button type="button" id="loginBtn" class="w-full py-3 px-4 bg-gradient-to-br from-primary to-secondary text-white font-semibold rounded-lg hover:opacity-95 transition-opacity shadow-lg hover:shadow-xl">Login with Microsoft</button></div><div id="loginError" class="hidden mt-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm"></div></div>`,
 
-      notesList: `<div id="notesListContainer" class="hidden flex flex-col bg-purple-100 rounded-2xl shadow-2xl border border-purple-200 max-w-5xl w-full p-6 gap-4 flex-1 overflow-hidden mt-2.5 mb-3">
-        <div class="flex-shrink-0">
-          <div class="flex items-center justify-between gap-3">
-            <div>
-              <h2 class="text-2xl font-bold text-gray-800">Notes</h2>
-              <p class="text-sm text-gray-600">Browse all notes and open details.</p>
-            </div>
-            <div class="flex gap-2">
-              <button id="refreshNotesBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Refresh</button>
-              <button id="newNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">New Note</button>
-              <button id="conversationsBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Conversations</button>
-            </div>
-          </div>
-          <div class="w-full mt-3">
-            <div class="flex items-center gap-2 border border-gray-200 rounded-lg px-3 py-2 bg-gray-50">
-              <input id="notesSearch" type="text" class="flex-1 bg-transparent outline-none text-sm text-gray-800" placeholder="Search notes..." />
-              <button id="searchVoiceBtn" class="text-purple-600 hover:text-purple-700" title="Voice search">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                  <path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div class="flex-1 overflow-y-auto">
-          <div id="notesListStatus" class="text-sm text-gray-600"></div>
-          <div id="notesEmpty" class="hidden text-sm text-gray-500">No notes yet. Click New Note to create one.</div>
-          <div id="notesGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 w-full"></div>
-        </div>
-      </div>`,
+      notesList: `<div id="notesListContainer" class="hidden flex flex-col bg-purple-100 rounded-2xl shadow-2xl border border-purple-200 max-w-5xl w-full p-6 gap-4 flex-1 overflow-hidden mt-2.5 mb-3"><div class="flex-shrink-0"><div class="flex items-center justify-between gap-3"><div><h2 class="text-2xl font-bold text-gray-800">Notes</h2><p class="text-sm text-gray-600">Browse all notes and open details.</p></div><div class="flex gap-2"><button id="refreshNotesBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Refresh</button><button id="newNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">New Note</button><button id="conversationsBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Conversations</button></div></div><div class="w-full mt-3"><div class="flex items-center gap-2 border border-gray-200 rounded-lg px-3 py-2 bg-gray-50"><input id="notesSearch" type="text" class="flex-1 bg-transparent outline-none text-sm text-gray-800" placeholder="Search notes..."/><button id="searchVoiceBtn" class="text-purple-600 hover:text-purple-700" title="Voice search"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"/></svg></button></div></div></div><div class="flex-1 overflow-y-auto"><div id="notesListStatus" class="text-sm text-gray-600"></div><div id="notesEmpty" class="hidden text-sm text-gray-500">No notes yet. Click New Note to create one.</div><div id="notesGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 w-full"></div></div></div>`,
 
-      noteDetail: `<div id="noteDetailContainer" class="hidden flex flex-col bg-white rounded-2xl shadow-2xl max-w-4xl w-full p-6 gap-3 overflow-hidden mt-2.5 max-h-[calc(100vh-140px)]">
-        <div class="flex-shrink-0 flex items-center justify-between">
-          <div>
-            <div class="text-xs text-gray-500" id="noteDetailMeta"></div>
-            <h2 id="noteDetailTitle" class="text-2xl font-bold text-gray-900">Note</h2>
-          </div>
-          <div class="flex gap-2">
-            <button id="detailBackBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
-            <button id="detailNewNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">New Note</button>
-          </div>
-        </div>
-        <div class="min-h-0 overflow-y-auto">
-          <div class="text-gray-800 leading-relaxed whitespace-pre-wrap border border-gray-100 rounded-lg p-3 bg-gray-50 mb-3" id="noteDetailBody"></div>
-          <div class="space-y-2">
-            <div class="text-sm text-gray-600">Audio</div>
-            <audio id="noteDetailAudio" controls class="hidden w-full"></audio>
-            <div id="noteDetailAudioStatus" class="text-xs text-gray-500"></div>
-          </div>
-        </div>
-      </div>`,
+      noteDetail: `<div id="noteDetailContainer" class="hidden flex flex-col bg-white rounded-2xl shadow-2xl max-w-4xl w-full p-6 gap-3 overflow-hidden mt-2.5 max-h-[calc(100vh-140px)]"><div class="flex-shrink-0 flex items-center justify-between"><div><div class="text-xs text-gray-500" id="noteDetailMeta"></div><h2 id="noteDetailTitle" class="text-2xl font-bold text-gray-900">Note</h2></div><div class="flex gap-2"><button id="detailBackBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button><button id="detailNewNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">New Note</button></div></div><div class="min-h-0 overflow-y-auto"><div class="text-gray-800 leading-relaxed whitespace-pre-wrap border border-gray-100 rounded-lg p-3 bg-gray-50 mb-3" id="noteDetailBody"></div><div class="space-y-2"><div class="text-sm text-gray-600">Audio</div><audio id="noteDetailAudio" controls class="hidden w-full"></audio><div id="noteDetailAudioStatus" class="text-xs text-gray-500"></div></div></div></div>`,
 
-      noteForm: `<div id="noteContainer" class="hidden self-start bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6">
-        <div class="flex items-center justify-between gap-3">
-          <div class="flex items-center gap-2">
-            <button id="backToListBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
-            <h2 class="text-2xl font-bold text-gray-800">New Note</h2>
-          </div>
-          <span id="graphStatus" class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-600">Graph: checking…</span>
-        </div>
-        <div class="space-y-4">
-          <div>
-            <label for="noteTitle" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
-            <div class="relative">
-              <input type="text" id="noteTitle" class="w-full rounded-lg border border-gray-300 p-3 pr-12 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter note title (optional)">
-              <button id="titleVoiceBtn" class="absolute right-3 top-1/2 -translate-y-1/2 text-purple-600 hover:text-purple-700 transition-colors" title="Click to speak title">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                  <path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" />
-                </svg>
-              </button>
-            </div>
-          </div>
-          <div class="flex gap-4">
-            <div class="flex-1">
-              <label for="jobNote" class="block text-sm font-medium text-gray-700 mb-1">Job Note</label>
-              <select id="jobNote" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary">
-                <option value="no">No</option>
-                <option value="yes">Yes</option>
-              </select>
-            </div>
-            <div class="flex-1">
-              <label for="noteType" class="block text-sm font-medium text-gray-700 mb-1">Note Type</label>
-              <select id="noteType" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary">
-                <option value="personal">Personal</option>
-                <option value="manager">Manager</option>
-                <option value="job">Job</option>
-              </select>
-            </div>
-          </div>
-          <div id="jobNumberContainer" class="hidden">
-            <label for="jobNumber" class="block text-sm font-medium text-gray-700 mb-1">Job Number <span class="text-red-600">*</span></label>
-            <input type="text" id="jobNumber" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter job number (required)">
-          </div>
-          <div>
-            <label for="noteText" class="block text-sm font-medium text-gray-700 mb-1">Note Text</label>
-            <div class="relative">
-              <textarea id="noteText" rows="4" class="w-full rounded-lg border border-gray-300 p-3 pr-12 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Type your note or click speaker icon to dictate..."></textarea>
-              <button id="noteVoiceBtn" class="absolute right-3 top-3 text-purple-600 hover:text-purple-700 transition-colors" title="Click to speak note">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                  <path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div class="space-y-2 relative pb-32">
-          <div class="flex items-center gap-3">
-            <button id="stopBtn" class="hidden w-10 h-10 flex items-center justify-center rounded-full bg-red-600 text-white shadow disabled:opacity-50" title="Stop recording" disabled>
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <rect x="5" y="5" width="10" height="10" rx="2"></rect>
-              </svg>
-            </button>
-          </div>
-          <button id="recordBtn" class="absolute bottom-12 right-0 w-24 h-24 rounded-full overflow-hidden shadow-lg hover:shadow-xl transition-shadow disabled:opacity-50 border-4 border-white bg-white" title="Click to record audio">
-            <img src="images/prism.png" alt="Prism" class="w-full h-full object-cover object-center scale-125">
-          </button>
-          <div class="relative">
-            <audio id="audioPreview" class="hidden" preload="metadata"></audio>
-            <div id="audioPlayer" class="hidden mt-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-3 shadow-sm">
-              <div class="flex items-center gap-3">
-                <button id="playPauseBtn" class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-white shadow" title="Play">
-                  ▶
-                </button>
-                <div class="flex-1">
-                  <div class="h-2 bg-gray-200 rounded-full overflow-hidden cursor-pointer" id="progressTrack">
-                    <div id="progressFill" class="h-full bg-primary w-0"></div>
-                  </div>
-                  <div class="flex justify-between text-xs text-gray-600 mt-1">
-                    <span id="currentTime">0:00</span>
-                    <span id="durationTime">0:00</span>
-                  </div>
-                </div>
-                <div id="audioMenuContainer" class="relative">
-                  <button id="audioMenuBtn" class="px-2 py-1 rounded bg-white text-gray-700 hover:bg-gray-100 border border-gray-200" title="More options">⋯</button>
-                  <div id="audioMenu" class="hidden absolute right-0 mt-1 w-36 rounded border border-gray-200 bg-white shadow-lg">
-                    <button id="removeAudioBtn" class="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100">Remove audio</button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div id="recordStatus" class="text-xs text-gray-500"></div>
-        </div>
-        <div class="flex items-center gap-3">
-          <button id="submitNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Submit Note</button>
-          <div id="submitStatus" class="text-sm text-gray-600"></div>
-        </div>
-      </div>`,
+      noteForm: `<div id="noteContainer" class="hidden self-start bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6"><div class="flex items-center justify-between gap-3"><div class="flex items-center gap-2"><button id="backToListBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button><h2 class="text-2xl font-bold text-gray-800">New Note</h2></div><span id="graphStatus" class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-600">Graph: checking…</span></div><div class="space-y-4"><div><label for="noteTitle" class="block text-sm font-medium text-gray-700 mb-1">Title</label><div class="relative"><input type="text" id="noteTitle" class="w-full rounded-lg border border-gray-300 p-3 pr-12 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter note title (optional)"><button id="titleVoiceBtn" class="absolute right-3 top-1/2 -translate-y-1/2 text-purple-600 hover:text-purple-700 transition-colors" title="Click to speak title"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"/></svg></button></div></div><div class="flex gap-4"><div class="flex-1"><label for="jobNote" class="block text-sm font-medium text-gray-700 mb-1">Job Note</label><select id="jobNote" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary"><option value="no">No</option><option value="yes">Yes</option></select></div><div class="flex-1"><label for="noteType" class="block text-sm font-medium text-gray-700 mb-1">Note Type</label><select id="noteType" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary"><option value="personal">Personal</option><option value="manager">Manager</option><option value="job">Job</option></select></div></div><div id="jobNumberContainer" class="hidden"><label for="jobNumber" class="block text-sm font-medium text-gray-700 mb-1">Job Number <span class="text-red-600">*</span></label><input type="text" id="jobNumber" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter job number (required)"></div><div><label for="noteText" class="block text-sm font-medium text-gray-700 mb-1">Note Text</label><div class="relative"><textarea id="noteText" rows="4" class="w-full rounded-lg border border-gray-300 p-3 pr-12 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Type your note or click speaker icon to dictate..."></textarea><button id="noteVoiceBtn" class="absolute right-3 top-3 text-purple-600 hover:text-purple-700 transition-colors" title="Click to speak note"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"/></svg></button></div></div></div><div class="space-y-2 relative pb-32"><div class="flex items-center gap-3"><button id="stopBtn" class="hidden w-10 h-10 flex items-center justify-center rounded-full bg-red-600 text-white shadow disabled:opacity-50" title="Stop recording" disabled><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><rect x="5" y="5" width="10" height="10" rx="2"></rect></svg></button></div><button id="recordBtn" class="absolute bottom-12 right-0 w-24 h-24 rounded-full overflow-hidden shadow-lg hover:shadow-xl transition-shadow disabled:opacity-50 border-4 border-white bg-white" title="Click to record audio"><img src="images/prism.png" alt="Prism" class="w-full h-full object-cover object-center scale-125"></button><div class="relative"><audio id="audioPreview" class="hidden" preload="metadata"></audio><div id="audioPlayer" class="hidden mt-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-3 shadow-sm"><div class="flex items-center gap-3"><button id="playPauseBtn" class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-white shadow" title="Play">▶</button><div class="flex-1"><div class="h-2 bg-gray-200 rounded-full overflow-hidden cursor-pointer" id="progressTrack"><div id="progressFill" class="h-full bg-primary w-0"></div></div><div class="flex justify-between text-xs text-gray-600 mt-1"><span id="currentTime">0:00</span><span id="durationTime">0:00</span></div></div><div id="audioMenuContainer" class="relative"><button id="audioMenuBtn" class="px-2 py-1 rounded bg-white text-gray-700 hover:bg-gray-100 border border-gray-200" title="More options">⋯</button><div id="audioMenu" class="hidden absolute right-0 mt-1 w-36 rounded border border-gray-200 bg-white shadow-lg"><button id="removeAudioBtn" class="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100">Remove audio</button></div></div></div></div></div><div id="recordStatus" class="text-xs text-gray-500"></div></div><div class="flex items-center gap-3"><button id="submitNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Submit Note</button><div id="submitStatus" class="text-sm text-gray-600"></div></div></div>`,
 
-      conversationForm: `<div id="conversationContainer" class="hidden self-start bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6">
-        <div class="flex items-center justify-between gap-3">
-          <div class="flex items-center gap-2">
-            <button id="backToConversationsListBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Conversations</button>
-            <h2 class="text-2xl font-bold text-gray-800">New Conversation</h2>
-          </div>
-          <span id="conversationGraphStatus" class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-600">Graph: checking…</span>
-        </div>
-        <div class="space-y-4">
-          <div>
-            <label for="conversationTitle" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
-            <div class="relative">
-              <input type="text" id="conversationTitle" class="w-full rounded-lg border border-gray-300 p-3 pr-12 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter conversation title (optional)">
-              <button id="conversationTitleVoiceBtn" class="absolute right-3 top-1/2 -translate-y-1/2 text-purple-600 hover:text-purple-700 transition-colors" title="Click to speak title">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                  <path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" />
-                </svg>
-              </button>
-            </div>
-          </div>
-          <div class="flex gap-4">
-            <div class="flex-1">
-              <label for="conversationIsJobConversation" class="block text-sm font-medium text-gray-700 mb-1">Job Conversation</label>
-              <select id="conversationIsJobConversation" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary">
-                <option value="no">No</option>
-                <option value="yes">Yes</option>
-              </select>
-            </div>
-            <div class="flex-1">
-              <label for="conversationType" class="block text-sm font-medium text-gray-700 mb-1">Type</label>
-              <select id="conversationType" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary">
-                <option value="personal">Personal</option>
-                <option value="manager">Manager</option>
-                <option value="job">Job</option>
-              </select>
-            </div>
-          </div>
-          <div id="conversationJobNumberContainer" class="hidden">
-            <label for="conversationJobNumber" class="block text-sm font-medium text-gray-700 mb-1">Job Number <span class="text-red-600">*</span></label>
-            <input type="text" id="conversationJobNumber" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter job number (required)">
-          </div>
-          <div>
-            <label for="conversationText" class="block text-sm font-medium text-gray-700 mb-1">Conversation Text</label>
-            <div class="relative">
-              <textarea id="conversationText" rows="4" class="w-full rounded-lg border border-gray-300 p-3 pr-12 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Type your conversation or click speaker icon to dictate..."></textarea>
-              <button id="conversationVoiceBtn" class="absolute right-3 top-3 text-purple-600 hover:text-purple-700 transition-colors" title="Click to speak conversation">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                  <path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div class="space-y-2 relative pb-32">
-          <div class="flex items-center gap-3">
-            <button id="conversationStopBtn" class="hidden w-10 h-10 flex items-center justify-center rounded-full bg-red-600 text-white shadow disabled:opacity-50" title="Stop recording" disabled>
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <rect x="5" y="5" width="10" height="10" rx="2"></rect>
-              </svg>
-            </button>
-          </div>
-          <button id="conversationRecordBtn" class="absolute bottom-12 right-0 w-24 h-24 rounded-full overflow-hidden shadow-lg hover:shadow-xl transition-shadow disabled:opacity-50 border-4 border-white bg-white" title="Click to record audio">
-            <img src="images/prism.png" alt="Prism" class="w-full h-full object-cover object-center scale-125">
-          </button>
-          <div class="relative">
-            <audio id="conversationAudioPreview" class="hidden" preload="metadata"></audio>
-            <div id="conversationAudioPlayer" class="hidden mt-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-3 shadow-sm">
-              <div class="flex items-center gap-3">
-                <button id="conversationPlayPauseBtn" class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-white shadow" title="Play">
-                  ▶
-                </button>
-                <div class="flex-1">
-                  <div class="h-2 bg-gray-200 rounded-full overflow-hidden cursor-pointer" id="conversationProgressTrack">
-                    <div id="conversationProgressFill" class="h-full bg-primary w-0"></div>
-                  </div>
-                  <div class="flex justify-between text-xs text-gray-600 mt-1">
-                    <span id="conversationCurrentTime">0:00</span>
-                    <span id="conversationDurationTime">0:00</span>
-                  </div>
-                </div>
-                <div id="conversationAudioMenuContainer" class="relative">
-                  <button id="conversationAudioMenuBtn" class="px-2 py-1 rounded bg-white text-gray-700 hover:bg-gray-100 border border-gray-200" title="More options">⋯</button>
-                  <div id="conversationAudioMenu" class="hidden absolute right-0 mt-1 w-36 rounded border border-gray-200 bg-white shadow-lg">
-                    <button id="conversationRemoveAudioBtn" class="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100">Remove audio</button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div id="conversationRecordStatus" class="text-xs text-gray-500"></div>
-        </div>
-        <div class="flex items-center gap-3">
-          <button id="submitConversationBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Submit Conversation</button>
-          <div id="conversationSubmitStatus" class="text-sm text-gray-600"></div>
-        </div>
-      </div>`,
+      conversationForm: `<div id="conversationContainer" class="hidden self-start bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6"><div class="flex items-center justify-between gap-3"><div class="flex items-center gap-2"><button id="backToConversationsListBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Conversations</button><h2 class="text-2xl font-bold text-gray-800">New Conversation</h2></div><span id="conversationGraphStatus" class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-600">Graph: checking…</span></div><div class="space-y-4"><div><label for="conversationTitle" class="block text-sm font-medium text-gray-700 mb-1">Title</label><div class="relative"><input type="text" id="conversationTitle" class="w-full rounded-lg border border-gray-300 p-3 pr-12 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter conversation title (optional)"><button id="conversationTitleVoiceBtn" class="absolute right-3 top-1/2 -translate-y-1/2 text-purple-600 hover:text-purple-700 transition-colors" title="Click to speak title"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"/></svg></button></div></div><div class="flex gap-4"><div class="flex-1"><label for="conversationIsJobConversation" class="block text-sm font-medium text-gray-700 mb-1">Job Conversation</label><select id="conversationIsJobConversation" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary"><option value="no">No</option><option value="yes">Yes</option></select></div><div class="flex-1"><label for="conversationType" class="block text-sm font-medium text-gray-700 mb-1">Type</label><select id="conversationType" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary"><option value="personal">Personal</option><option value="manager">Manager</option><option value="job">Job</option></select></div></div><div id="conversationJobNumberContainer" class="hidden"><label for="conversationJobNumber" class="block text-sm font-medium text-gray-700 mb-1">Job Number <span class="text-red-600">*</span></label><input type="text" id="conversationJobNumber" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter job number (required)"></div><div><label for="conversationText" class="block text-sm font-medium text-gray-700 mb-1">Conversation Text</label><div class="relative"><textarea id="conversationText" rows="4" class="w-full rounded-lg border border-gray-300 p-3 pr-12 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Type your conversation or click speaker icon to dictate..."></textarea><button id="conversationVoiceBtn" class="absolute right-3 top-3 text-purple-600 hover:text-purple-700 transition-colors" title="Click to speak conversation"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"/></svg></button></div></div></div><div class="space-y-2 relative pb-32"><div class="flex items-center gap-3"><button id="conversationStopBtn" class="hidden w-10 h-10 flex items-center justify-center rounded-full bg-red-600 text-white shadow disabled:opacity-50" title="Stop recording" disabled><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><rect x="5" y="5" width="10" height="10" rx="2"></rect></svg></button></div><button id="conversationRecordBtn" class="absolute bottom-12 right-0 w-24 h-24 rounded-full overflow-hidden shadow-lg hover:shadow-xl transition-shadow disabled:opacity-50 border-4 border-white bg-white" title="Click to record audio"><img src="images/prism.png" alt="Prism" class="w-full h-full object-cover object-center scale-125"></button><div class="relative"><audio id="conversationAudioPreview" class="hidden" preload="metadata"></audio><div id="conversationAudioPlayer" class="hidden mt-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-3 shadow-sm"><div class="flex items-center gap-3"><button id="conversationPlayPauseBtn" class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-white shadow" title="Play">▶</button><div class="flex-1"><div class="h-2 bg-gray-200 rounded-full overflow-hidden cursor-pointer" id="conversationProgressTrack"><div id="conversationProgressFill" class="h-full bg-primary w-0"></div></div><div class="flex justify-between text-xs text-gray-600 mt-1"><span id="conversationCurrentTime">0:00</span><span id="conversationDurationTime">0:00</span></div></div><div id="conversationAudioMenuContainer" class="relative"><button id="conversationAudioMenuBtn" class="px-2 py-1 rounded bg-white text-gray-700 hover:bg-gray-100 border border-gray-200" title="More options">⋯</button><div id="conversationAudioMenu" class="hidden absolute right-0 mt-1 w-36 rounded border border-gray-200 bg-white shadow-lg"><button id="conversationRemoveAudioBtn" class="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100">Remove audio</button></div></div></div></div></div><div id="conversationRecordStatus" class="text-xs text-gray-500"></div></div><div class="flex items-center gap-3"><button id="submitConversationBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Submit Conversation</button><div id="conversationSubmitStatus" class="text-sm text-gray-600"></div></div></div>`,
 
-      conversationsList: `<div id="conversationsContainer" class="hidden flex flex-col bg-purple-100 rounded-2xl shadow-2xl border border-purple-200 max-w-5xl w-full p-6 gap-4 flex-1 overflow-hidden mt-2.5 mb-3">
-        <div class="flex-shrink-0">
-          <div class="flex items-center justify-between gap-3">
-            <div>
-              <h2 class="text-2xl font-bold text-gray-800">Conversations</h2>
-              <p class="text-sm text-gray-600">Browse all conversations.</p>
-            </div>
-            <div class="flex gap-2">
-              <button id="backToListFromConversationsBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
-              <button id="newConversationBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">New Conversation</button>
-            </div>
-          </div>
-        </div>
-        <div class="flex-1 overflow-y-auto">
-          <div id="conversationsListStatus" class="text-sm text-gray-600"></div>
-          <div id="conversationsEmpty" class="hidden text-sm text-gray-500">No conversations yet. Click New Conversation to start one.</div>
-          <div id="conversationsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 w-full"></div>
-        </div>
-      </div>`
+      conversationsList: `<div id="conversationsContainer" class="hidden flex flex-col bg-purple-100 rounded-2xl shadow-2xl border border-purple-200 max-w-5xl w-full p-6 gap-4 flex-1 overflow-hidden mt-2.5 mb-3"><div class="flex-shrink-0"><div class="flex items-center justify-between gap-3"><div><h2 class="text-2xl font-bold text-gray-800">Conversations</h2><p class="text-sm text-gray-600">Browse all conversations.</p></div><div class="flex gap-2"><button id="backToListFromConversationsBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button><button id="newConversationBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">New Conversation</button></div></div></div><div class="flex-1 overflow-y-auto"><div id="conversationsListStatus" class="text-sm text-gray-600"></div><div id="conversationsEmpty" class="hidden text-sm text-gray-500">No conversations yet. Click New Conversation to start one.</div><div id="conversationsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 w-full"></div></div></div>`
     };
 
-    // Initialize all containers into the DOM once
     function initializeContainers() {
       const host = document.getElementById('containerHost');
       Object.values(CONTAINERS).forEach(containerHTML => {
@@ -367,27 +88,6 @@
       });
     }
 
-    // --- Component Utility System ---
-    // Manages displaying/hiding reusable components in utilities container
-    const ComponentSystem = {
-      // Show a component by rendering HTML to the host
-      show: (componentHTML) => {
-        const host = document.getElementById('utilityComponentHost');
-        const container = document.getElementById('utilitiesContainer');
-        host.innerHTML = componentHTML;
-        container.classList.remove('hidden');
-      },
-      
-      // Hide the utilities container
-      hide: () => {
-        const container = document.getElementById('utilitiesContainer');
-        container.classList.add('hidden');
-      },
-      
-      // Get the component host for direct manipulation
-      getHost: () => document.getElementById('utilityComponentHost'),
-    };
-
     // --- Voice Recognition Setup with auto-stop ---
     function setupTitleVoiceRecognition() {
       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
@@ -801,9 +501,9 @@
       }
     });
 
-    // Initialize all containers from templates
+    // Initialize containers before updating auth UI
     initializeContainers();
-
+    
     // Initial auth UI update
     updateAuthUI();
     
@@ -1153,43 +853,12 @@
       document.getElementById('notesListContainer').classList.remove('hidden');
       document.getElementById('noteDetailContainer').classList.add('hidden');
       document.getElementById('noteContainer').classList.add('hidden');
-      document.getElementById('conversationsContainer').classList.add('hidden');
-      document.getElementById('conversationContainer').classList.add('hidden');
     }
 
     function showNoteForm() {
       document.getElementById('notesListContainer').classList.add('hidden');
       document.getElementById('noteDetailContainer').classList.add('hidden');
       document.getElementById('noteContainer').classList.remove('hidden');
-      document.getElementById('conversationsContainer').classList.add('hidden');
-      document.getElementById('conversationContainer').classList.add('hidden');
-    }
-
-    function showConversations() {
-      document.getElementById('notesListContainer').classList.add('hidden');
-      document.getElementById('noteDetailContainer').classList.add('hidden');
-      document.getElementById('noteContainer').classList.add('hidden');
-      document.getElementById('conversationsContainer').classList.remove('hidden');
-      document.getElementById('conversationContainer').classList.add('hidden');
-    }
-
-    function showConversationForm() {
-      document.getElementById('notesListContainer').classList.add('hidden');
-      document.getElementById('noteDetailContainer').classList.add('hidden');
-      document.getElementById('noteContainer').classList.add('hidden');
-      document.getElementById('conversationsContainer').classList.add('hidden');
-      document.getElementById('conversationContainer').classList.remove('hidden');
-    }
-
-    function resetConversationForm() {
-      document.getElementById('conversationTitle').value = '';
-      document.getElementById('conversationText').value = '';
-      document.getElementById('conversationIsJobConversation').value = 'no';
-      document.getElementById('conversationType').value = 'personal';
-      document.getElementById('conversationJobNumber').value = '';
-      document.getElementById('conversationJobNumberContainer').classList.add('hidden');
-      document.getElementById('conversationAudioPreview').src = '';
-      document.getElementById('conversationAudioPlayer').classList.add('hidden');
     }
 
     function resetNoteForm() {
@@ -1359,14 +1028,6 @@
       loadNotesList();
     });
 
-    document.getElementById('conversationsBtn').addEventListener('click', () => {
-      showConversations();
-    });
-
-    document.getElementById('backToListFromConversationsBtn').addEventListener('click', () => {
-      showNotesList();
-    });
-
     document.getElementById('backToListBtn').addEventListener('click', () => {
       showNotesList();
     });
@@ -1380,15 +1041,6 @@
       showNoteForm();
     });
 
-    document.getElementById('newConversationBtn').addEventListener('click', () => {
-      resetConversationForm();
-      showConversationForm();
-    });
-
-    document.getElementById('backToConversationsListBtn').addEventListener('click', () => {
-      showConversations();
-    });
-
     // Search input + voice
     const notesSearchInput = document.getElementById('notesSearch');
     const searchVoiceBtn = document.getElementById('searchVoiceBtn');