feat(notes): multi-attachment support, card icons, and inline previews\n\n- Allow selecting and uploading multiple attachments per note (images, videos, docs)\n- Batch audio segments and files into PocketBase multi-file field (Attachments.file)\n- Fallback to read files directly from input; per-file error logging\n- Note cards show clickable attachment-type icons (image/video/file/audio)\n- Inline preview panel in notes list + full attachment rendering in detail\n- Keep existing Notes/Attachments collections and pb_id association

index.html

@@ -34,65 +34,25 @@
     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>
-
-  <script src="https://cdn.jsdelivr.net/npm/pocketbase/dist/pocketbase.umd.js"></script>
-  <script>
-    const APP_VERSION = '1.0.0-alpha3';
-    console.log(`App version: ${APP_VERSION}`);
-    // Initialize PocketBase client
-    const pb = new PocketBase('https://pocketbase.ccllc.pro');
-    pb.autoCancellation(false);
-
-    // Collections (from .env in scaffold)
-    const NOTES_COLLECTION = 'Notes';
-    const ATTACHMENTS_COLLECTION = 'Attachments';
-    const ATTACHMENTS_FILE_FIELD = 'file';
-    const ATTACHMENTS_PBID_FIELD = 'pb_id';
-    const NOTE_BODY_HTML_FIELD = 'body_html';
-    const NOTE_BODY_PLAIN_FIELD = 'body_plain';
-    const NOTE_USERNAME_FIELD = 'Username';
-    let mediaRecorder = null;
-    let recordedBlob = null;
-    let titleRecognition = null;
-    let noteRecognition = null;
-    let isTitleRecognizing = false;
-    let isNoteRecognizing = false;
-    let silenceTimer = null;
-    let searchSilenceTimer = null;
-
-    // ============================================================
-    // CONTAINER TEMPLATES
-    // These are organized as template literals for independent updates
-    // Intent: Migrate to separate files (containers/) when project matures
-    // Status: Option 1 - Template Literals (current)
-    // Future: Option 2 - Separate files with server routes
-    // ============================================================
-
-    const CONTAINERS = {
-      login: `<div id="loginContainer" class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8">
+  <!-- Login Container -->
+  <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 id="loginError" class="hidden mt-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm"></div>
+  </div>
+
+  <!-- Notes List Container -->
+  <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>
@@ -115,15 +75,24 @@
           </button>
         </div>
       </div>
+      <!-- Attachment preview panel -->
+      <div id="notesAttachmentPreviewPanel" class="hidden mt-3 rounded-xl border border-purple-200 bg-white shadow p-4">
+        <div class="flex items-center justify-between mb-2">
+          <div id="notesAttachmentPreviewTitle" class="text-sm font-semibold text-gray-800">Attachment Preview</div>
+          <button id="notesAttachmentPreviewClose" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm">Close</button>
+        </div>
+        <div id="notesAttachmentPreviewContent" class="space-y-2"></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>`,
+  </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)]">
+  <!-- Note Detail Container -->
+  <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>
@@ -141,10 +110,16 @@
         <audio id="noteDetailAudio" controls class="hidden w-full"></audio>
         <div id="noteDetailAudioStatus" class="text-xs text-gray-500"></div>
       </div>
+      <div class="space-y-2">
+        <div class="text-sm text-gray-600">Attachments</div>
+        <div id="noteDetailAttachments" class="space-y-1 text-sm text-gray-800"></div>
+        <div id="noteDetailAttachmentsStatus" class="text-xs text-gray-500"></div>
+      </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">
+  <!-- Note + Audio Container -->
+  <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>
@@ -235,13 +210,44 @@
       </div>
       <div id="recordStatus" class="text-xs text-gray-500"></div>
     </div>
+    <div class="space-y-2">
+      <label class="block text-sm font-medium text-gray-700">Attachments</label>
+      <input id="noteAttachmentsInput" type="file" multiple class="w-full text-sm" accept="image/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt">
+      <div class="flex items-center gap-2">
+        <button id="clearAttachmentsBtn" class="px-3 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm" type="button">Clear</button>
+        <div id="noteAttachmentsSummary" class="text-xs text-gray-600">No attachments selected.</div>
+      </div>
+      <div id="noteAttachmentsList" class="space-y-1"></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>`,
+  </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">
+  <!-- Conversations List Container -->
+  <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>
+
+  <!-- Conversation Form Container -->
+  <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>
@@ -249,6 +255,7 @@
       </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>
@@ -261,6 +268,7 @@
           </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>
@@ -278,10 +286,12 @@
           </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">
@@ -294,6 +304,7 @@
         </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>
@@ -332,61 +343,38 @@
       </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>`
-    };
 
-    // Initialize all containers into the DOM once
-    function initializeContainers() {
-      const host = document.getElementById('containerHost');
-      Object.values(CONTAINERS).forEach(containerHTML => {
-        host.insertAdjacentHTML('beforeend', containerHTML);
-      });
-    }
+  <script src="https://cdn.jsdelivr.net/npm/pocketbase/dist/pocketbase.umd.js"></script>
+  <script>
+    const APP_VERSION = '1.0.0-alpha3';
+    console.log(`App version: ${APP_VERSION}`);
+    // Initialize PocketBase client
+    const pb = new PocketBase('https://pocketbase.ccllc.pro');
+    pb.autoCancellation(false);
 
-    // --- 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'),
-    };
+    // Collections (from .env in scaffold)
+    const NOTES_COLLECTION = 'Notes';
+    const ATTACHMENTS_COLLECTION = 'Attachments';
+    const ATTACHMENTS_FILE_FIELD = 'file';
+    const ATTACHMENTS_PBID_FIELD = 'pb_id';
+    const NOTE_BODY_HTML_FIELD = 'body_html';
+    const NOTE_BODY_PLAIN_FIELD = 'body_plain';
+    const NOTE_USERNAME_FIELD = 'Username';
+    let mediaRecorder = null;
+    let recordedBlob = null;
+    let titleRecognition = null;
+    let noteRecognition = null;
+    let isTitleRecognizing = false;
+    let isNoteRecognizing = false;
+    let silenceTimer = null;
+    let searchSilenceTimer = null;
+    let pendingNoteAttachments = [];
 
     // --- Voice Recognition Setup with auto-stop ---
     function setupTitleVoiceRecognition() {
@@ -656,6 +644,54 @@
       }
     }
 
+    function formatBytes(bytes) {
+      if (!Number.isFinite(bytes) || bytes <= 0) return '';
+      const units = ['B', 'KB', 'MB', 'GB'];
+      let value = bytes;
+      let unitIndex = 0;
+      while (value >= 1024 && unitIndex < units.length - 1) {
+        value /= 1024;
+        unitIndex += 1;
+      }
+      const decimals = value >= 10 ? 0 : 1;
+      return `${value.toFixed(decimals)} ${units[unitIndex]}`;
+    }
+
+    function attachmentKindFromName(name) {
+      const ext = (name || '').split('.').pop()?.toLowerCase();
+      if (!ext) return 'file';
+      if (['mp3', 'wav', 'm4a', 'aac', 'ogg', 'webm'].includes(ext)) return 'audio';
+      if (['mp4', 'mov', 'mkv', 'avi', 'm4v', 'webm'].includes(ext)) return 'video';
+      if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'svg'].includes(ext)) return 'image';
+      return 'file';
+    }
+
+    function getAttachmentFileNames(att) {
+      const val = att[ATTACHMENTS_FILE_FIELD];
+      if (!val) return [];
+      return Array.isArray(val) ? val : [val];
+    }
+
+    function buildKindSetFromAttachments(atts) {
+      const kinds = new Set();
+      (atts || []).forEach((att) => {
+        getAttachmentFileNames(att).forEach((name) => kinds.add(attachmentKindFromName(name)));
+      });
+      return kinds;
+    }
+
+    function findFirstAttachmentByKind(atts, kind) {
+      for (const att of (atts || [])) {
+        const names = getAttachmentFileNames(att);
+        for (const name of names) {
+          if (attachmentKindFromName(name) === kind) {
+            return { att, name, url: pb.files.getURL(att, name) };
+          }
+        }
+      }
+      return null;
+    }
+
     // Update auth UI based on login state
     function updateAuthUI() {
       const loginContainer = document.getElementById('loginContainer');
@@ -664,6 +700,8 @@
       const notesListContainer = document.getElementById('notesListContainer');
       const noteDetailContainer = document.getElementById('noteDetailContainer');
       const noteContainer = document.getElementById('noteContainer');
+      const conversationsContainer = document.getElementById('conversationsContainer');
+      const conversationContainer = document.getElementById('conversationContainer');
       if (pb.authStore.isValid) {
         loginContainer.classList.add('hidden');
         userDisplay.classList.remove('hidden');
@@ -671,6 +709,8 @@
         notesListContainer.classList.remove('hidden');
         noteDetailContainer.classList.add('hidden');
         noteContainer.classList.add('hidden');
+        conversationsContainer.classList.add('hidden');
+        conversationContainer.classList.add('hidden');
         loadNotesList();
       } else {
         loginContainer.classList.remove('hidden');
@@ -680,6 +720,8 @@
         notesListContainer.classList.add('hidden');
         noteDetailContainer.classList.add('hidden');
         noteContainer.classList.add('hidden');
+        conversationsContainer.classList.add('hidden');
+        conversationContainer.classList.add('hidden');
       }
     }
 
@@ -701,22 +743,48 @@
           console.log('✓ Backend health check passed');
         }
         const graphBadge = document.getElementById('graphStatus');
+        const conversationGraphBadge = document.getElementById('conversationGraphStatus');
         const graphResp = await fetch('/api/graph/status');
         if (graphResp.ok) {
           const gs = await graphResp.json();
-          graphBadge.textContent = `Graph: active (exp ${new Date(gs.expiresOnISO).toLocaleTimeString()})`;
-          graphBadge.className = 'text-xs px-2 py-1 rounded bg-green-100 text-green-700';
+          const txt = `Graph: active (exp ${new Date(gs.expiresOnISO).toLocaleTimeString()})`;
+          const cls = 'text-xs px-2 py-1 rounded bg-green-100 text-green-700';
+          if (graphBadge) {
+            graphBadge.textContent = txt;
+            graphBadge.className = cls;
+          }
+          if (conversationGraphBadge) {
+            conversationGraphBadge.textContent = txt;
+            conversationGraphBadge.className = cls;
+          }
           console.log('✓ Graph token active');
         } else {
-          graphBadge.textContent = 'Graph: error';
-          graphBadge.className = 'text-xs px-2 py-1 rounded bg-red-100 text-red-700';
+          const txt = 'Graph: error';
+          const cls = 'text-xs px-2 py-1 rounded bg-red-100 text-red-700';
+          if (graphBadge) {
+            graphBadge.textContent = txt;
+            graphBadge.className = cls;
+          }
+          if (conversationGraphBadge) {
+            conversationGraphBadge.textContent = txt;
+            conversationGraphBadge.className = cls;
+          }
           console.log('❌ Graph token status failed');
         }
       } catch (error) {
         console.error('❌ Failed to check backend:', error.message);
         const graphBadge = document.getElementById('graphStatus');
-        graphBadge.textContent = 'Graph: error';
-        graphBadge.className = 'text-xs px-2 py-1 rounded bg-red-100 text-red-700';
+        const conversationGraphBadge = document.getElementById('conversationGraphStatus');
+        const txt = 'Graph: error';
+        const cls = 'text-xs px-2 py-1 rounded bg-red-100 text-red-700';
+        if (graphBadge) {
+          graphBadge.textContent = txt;
+          graphBadge.className = cls;
+        }
+        if (conversationGraphBadge) {
+          conversationGraphBadge.textContent = txt;
+          conversationGraphBadge.className = cls;
+        }
       }
     }
 
@@ -801,9 +869,6 @@
       }
     });
 
-    // Initialize all containers from templates
-    initializeContainers();
-
     // Initial auth UI update
     updateAuthUI();
     
@@ -1181,15 +1246,31 @@
       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 renderNoteAttachmentsList() {
+      const listEl = document.getElementById('noteAttachmentsList');
+      const summaryEl = document.getElementById('noteAttachmentsSummary');
+      listEl.innerHTML = '';
+      if (!pendingNoteAttachments.length) {
+        summaryEl.textContent = 'No attachments selected.';
+        return;
+      }
+      summaryEl.textContent = `${pendingNoteAttachments.length} file(s) selected`;
+      const frag = document.createDocumentFragment();
+      pendingNoteAttachments.forEach((file) => {
+        const row = document.createElement('div');
+        row.className = 'flex items-center gap-2 text-sm text-gray-800';
+        const kind = attachmentKindFromName(file.name);
+        const badge = document.createElement('span');
+        badge.className = 'px-2 py-0.5 rounded-full text-xs border border-gray-200 text-gray-700 bg-gray-50';
+        badge.textContent = kind;
+        const label = document.createElement('span');
+        const size = formatBytes(file.size);
+        label.textContent = size ? `${file.name} (${size})` : file.name;
+        row.appendChild(badge);
+        row.appendChild(label);
+        frag.appendChild(row);
+      });
+      listEl.appendChild(frag);
     }
 
     function resetNoteForm() {
@@ -1200,6 +1281,21 @@
       document.getElementById('jobNumber').value = '';
       document.getElementById('jobNumberContainer').classList.add('hidden');
       clearAudio();
+      pendingNoteAttachments = [];
+      const noteAttachmentsInput = document.getElementById('noteAttachmentsInput');
+      if (noteAttachmentsInput) noteAttachmentsInput.value = '';
+      renderNoteAttachmentsList();
+    }
+
+    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 renderNotesList(items) {
@@ -1227,15 +1323,21 @@
         const plain = note[NOTE_BODY_PLAIN_FIELD] || (note[NOTE_BODY_HTML_FIELD] ? htmlToPlainText(note[NOTE_BODY_HTML_FIELD]) : '');
         const snippet = (plain || '').slice(0, 160) + ((plain && plain.length > 160) ? '…' : '');
         const meta = `${note.type || 'personal'} • ${note.job_note ? 'Job' : 'General'}${note.Job_Number ? ' • #' + note.Job_Number : ''}`;
-        const attachmentCount = (note._attachments || []).length;
-        const attachmentBadge = attachmentCount ? `
-          <div class="flex items-center gap-1 text-purple-700 text-xs">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M5 8.25a.75.75 0 0 1 .75.75v4.25a3.5 3.5 0 1 0 7 0V6.5a2.25 2.25 0 0 0-4.5 0v5.75a1 1 0 1 0 2 0V7.25a.75.75 0 0 1 1.5 0v5a2.5 2.5 0 1 1-5 0V6.5a3.75 3.75 0 0 1 7.5 0v6.75a5 5 0 1 1-10 0V9a.75.75 0 0 1 .75-.75Z" />
-            </svg>
-            <span>${attachmentCount}</span>
-          </div>
-        ` : '';
+        const atts = note._attachments || [];
+        const typeSet = buildKindSetFromAttachments(atts);
+        function iconBtnHtml(kind) {
+          const map = {
+            image: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M4.5 6A1.5 1.5 0 0 1 6 4.5h12A1.5 1.5 0 0 1 19.5 6v12a1.5 1.5 0 0 1-1.5 1.5H6A1.5 1.5 0 0 1 4.5 18V6Zm2 10l3.75-5 3 4 2.25-3 3 4.5H6.5Z"/></svg>',
+            video: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M4 6.75A1.75 1.75 0 0 1 5.75 5h7.5A1.75 1.75 0 0 1 15 6.75v10.5A1.75 1.75 0 0 1 13.25 19h-7.5A1.75 1.75 0 0 1 4 17.25V6.75Zm12.5.5 3.75 2.25v5l-3.75 2.25V7.25Z"/></svg>',
+            audio: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M9 5.25a.75.75 0 0 1 .75-.75h.5A3.75 3.75 0 0 1 14 8.25v6a3.75 3.75 0 0 1-3.75 3.75h-.5A.75.75 0 0 1 9 17.25V5.25Zm7.75 3a.75.75 0 0 1 1.25.57v5.36a.75.75 0 0 1-1.25.57l-2.5-1.79a.75.75 0 0 1 0-1.21l2.5-1.5Z"/></svg>',
+            file: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M6.75 3A1.75 1.75 0 0 0 5 4.75v14.5A1.75 1.75 0 0 0 6.75 21h10.5A1.75 1.75 0 0 0 19 19.25V8.5l-5.5-5.5H6.75Z"/></svg>',
+          };
+          return `<button type="button" class="px-1.5 py-1 rounded bg-white/70 hover:bg-white border border-gray-200 text-purple-700" data-attachment-button data-attachment-kind="${kind}">${map[kind] || ''}</button>`;
+        }
+        const attachmentIcons = ['image', 'video', 'file', 'audio']
+          .filter((k) => typeSet.has(k))
+          .map(iconBtnHtml)
+          .join('');
         card.innerHTML = `
           <div class="flex items-center justify-between gap-2">
             <div class="font-semibold text-gray-900 truncate">${escapeHtml(title)}</div>
@@ -1244,7 +1346,7 @@
           <div class="text-sm text-gray-700 line-clamp-3 flex-1">${escapeHtml(snippet || '(empty)')}</div>
           <div class="flex items-center justify-between text-xs text-gray-600">
             <span>${escapeHtml(meta)}</span>
-            ${attachmentBadge}
+            <div class="flex items-center gap-1">${attachmentIcons}</div>
           </div>
         `;
         frag.appendChild(card);
@@ -1322,28 +1424,133 @@
 
       const audioEl = document.getElementById('noteDetailAudio');
       const audioStatus = document.getElementById('noteDetailAudioStatus');
+      const attachmentsListEl = document.getElementById('noteDetailAttachments');
+      const attachmentsStatusEl = document.getElementById('noteDetailAttachmentsStatus');
       audioEl.classList.add('hidden');
       audioEl.src = '';
       audioStatus.textContent = 'Loading audio...';
+      attachmentsListEl.innerHTML = '';
+      attachmentsStatusEl.textContent = 'Loading attachments...';
       try {
-        const atts = await pb.collection(ATTACHMENTS_COLLECTION).getList(1, 1, {
+        const atts = await pb.collection(ATTACHMENTS_COLLECTION).getFullList({
           sort: '-created',
           filter: `${ATTACHMENTS_PBID_FIELD} = "${note.id}"`,
+          batch: 200,
         });
-        if (atts.items.length) {
-          const att = atts.items[0];
-          audioEl.src = pb.files.getURL(att, att[ATTACHMENTS_FILE_FIELD]);
+
+        const audioMatch = findFirstAttachmentByKind(atts, 'audio');
+        if (audioMatch) {
+          audioEl.src = audioMatch.url;
           audioEl.classList.remove('hidden');
           audioStatus.textContent = '';
         } else {
           audioStatus.textContent = 'No audio attached.';
         }
+
+        if (!atts.length) {
+          attachmentsStatusEl.textContent = 'No attachments uploaded.';
+        } else {
+          attachmentsStatusEl.textContent = '';
+          const frag = document.createDocumentFragment();
+          atts.forEach((att) => {
+            const names = getAttachmentFileNames(att);
+            names.forEach((name) => {
+              const url = pb.files.getURL(att, name);
+              const kind = attachmentKindFromName(name);
+              const row = document.createElement('div');
+              row.className = 'flex items-center gap-2';
+              const badge = document.createElement('span');
+              badge.className = 'px-2 py-0.5 rounded-full text-xs border border-gray-200 text-gray-700 bg-gray-50';
+              badge.textContent = kind;
+              const link = document.createElement('a');
+              link.href = url;
+              link.target = '_blank';
+              link.rel = 'noopener noreferrer';
+              link.className = 'text-purple-700 hover:text-purple-900 break-all';
+              link.textContent = name;
+              row.appendChild(badge);
+              row.appendChild(link);
+              frag.appendChild(row);
+            });
+          });
+          attachmentsListEl.appendChild(frag);
+        }
       } catch (e) {
         audioStatus.textContent = `Audio load failed: ${e.message}`;
+        attachmentsStatusEl.textContent = `Attachments load failed: ${e.message}`;
       }
     }
 
+    function showAttachmentPreview(note, kind) {
+      const panel = document.getElementById('notesAttachmentPreviewPanel');
+      const titleEl = document.getElementById('notesAttachmentPreviewTitle');
+      const contentEl = document.getElementById('notesAttachmentPreviewContent');
+      contentEl.innerHTML = '';
+      const match = findFirstAttachmentByKind(note._attachments || [], kind);
+      if (!match) {
+        titleEl.textContent = 'Attachment Preview';
+        contentEl.textContent = 'No matching attachment.';
+        panel.classList.remove('hidden');
+        return;
+      }
+      const { att, name: fileName, url } = match;
+      titleEl.textContent = `Preview: ${kind}`;
+      let node = null;
+      if (kind === 'image') {
+        node = document.createElement('img');
+        node.src = url;
+        node.className = 'max-h-80 rounded border border-gray-200';
+        node.alt = fileName || 'image';
+      } else if (kind === 'video') {
+        node = document.createElement('video');
+        node.src = url;
+        node.controls = true;
+        node.className = 'w-full max-h-80 rounded border border-gray-200 bg-black';
+      } else if (kind === 'audio') {
+        node = document.createElement('audio');
+        node.src = url;
+        node.controls = true;
+        node.className = 'w-full';
+      } else {
+        // Try inline preview for PDFs, otherwise provide a link
+        const isPdf = (fileName || '').toLowerCase().endsWith('.pdf');
+        if (isPdf) {
+          node = document.createElement('embed');
+          node.src = url;
+          node.type = 'application/pdf';
+          node.className = 'w-full h-80 rounded border border-gray-200';
+        } else {
+          const link = document.createElement('a');
+          link.href = url;
+          link.target = '_blank';
+          link.rel = 'noopener noreferrer';
+          link.className = 'text-purple-700 hover:text-purple-900 underline';
+          link.textContent = 'Open attachment';
+          node = link;
+        }
+      }
+      contentEl.appendChild(node);
+      panel.classList.remove('hidden');
+    }
+
+    document.getElementById('notesAttachmentPreviewClose').addEventListener('click', () => {
+      document.getElementById('notesAttachmentPreviewPanel').classList.add('hidden');
+    });
+
     document.getElementById('notesGrid').addEventListener('click', (e) => {
+      const btn = e.target.closest('[data-attachment-button]');
+      if (btn) {
+        e.preventDefault();
+        e.stopPropagation();
+        const card = btn.closest('[data-note-id]');
+        if (!card) return;
+        const kind = btn.getAttribute('data-attachment-kind');
+        const note = notesCache[card.dataset.noteId];
+        if (note && kind) {
+          showAttachmentPreview(note, kind);
+          return;
+        }
+      }
       const card = e.target.closest('[data-note-id]');
       if (!card) return;
       const note = notesCache[card.dataset.noteId];
@@ -1367,6 +1574,15 @@
       showNotesList();
     });
 
+    document.getElementById('newConversationBtn').addEventListener('click', () => {
+      resetConversationForm();
+      showConversationForm();
+    });
+
+    document.getElementById('backToConversationsListBtn').addEventListener('click', () => {
+      showConversations();
+    });
+
     document.getElementById('backToListBtn').addEventListener('click', () => {
       showNotesList();
     });
@@ -1380,13 +1596,16 @@
       showNoteForm();
     });
 
-    document.getElementById('newConversationBtn').addEventListener('click', () => {
-      resetConversationForm();
-      showConversationForm();
+    document.getElementById('noteAttachmentsInput').addEventListener('change', (e) => {
+      pendingNoteAttachments = Array.from(e.target.files || []);
+      renderNoteAttachmentsList();
     });
 
-    document.getElementById('backToConversationsListBtn').addEventListener('click', () => {
-      showConversations();
+    document.getElementById('clearAttachmentsBtn').addEventListener('click', (e) => {
+      e.preventDefault();
+      pendingNoteAttachments = [];
+      document.getElementById('noteAttachmentsInput').value = '';
+      renderNoteAttachmentsList();
     });
 
     // Search input + voice
@@ -1527,22 +1746,50 @@
         
         const noteRecord = await pb.collection(NOTES_COLLECTION).create(payload);
         const attachmentRecords = [];
+        let audioAttachmentCount = 0;
+        let fileAttachmentCount = 0;
         if (recordedSegments && recordedSegments.length) {
+          const fd = new FormData();
           for (let i = 0; i < recordedSegments.length; i++) {
             const seg = recordedSegments[i];
             const blobToUpload = seg.blob || seg;
             const fileName = seg.name || `note-audio-seg-${i + 1}.webm`;
             const file = new File([blobToUpload], fileName, { type: blobToUpload.type || 'audio/webm' });
-            const fd = new FormData();
             fd.append(ATTACHMENTS_FILE_FIELD, file);
+            audioAttachmentCount += 1;
+          }
           fd.append(ATTACHMENTS_PBID_FIELD, noteRecord.id);
           const createdAtt = await pb.collection(ATTACHMENTS_COLLECTION).create(fd);
           attachmentRecords.push(createdAtt);
         }
+        const inputEl = document.getElementById('noteAttachmentsInput');
+        const filesFromInput = Array.from(inputEl?.files || []);
+        const filesToUpload = (pendingNoteAttachments && pendingNoteAttachments.length) ? pendingNoteAttachments : filesFromInput;
+        if (filesToUpload && filesToUpload.length) {
+          const fdFiles = new FormData();
+          for (let i = 0; i < filesToUpload.length; i++) {
+            const srcFile = filesToUpload[i];
+            const file = new File([srcFile], srcFile.name, { type: srcFile.type || 'application/octet-stream' });
+            fdFiles.append(ATTACHMENTS_FILE_FIELD, file);
+            fileAttachmentCount += 1;
           }
-        const attachmentMsg = attachmentRecords.length ? ` with ${attachmentRecords.length} audio segment(s)` : '';
+          fdFiles.append(ATTACHMENTS_PBID_FIELD, noteRecord.id);
+          try {
+            const createdAttFiles = await pb.collection(ATTACHMENTS_COLLECTION).create(fdFiles);
+            attachmentRecords.push(createdAttFiles);
+          } catch (uploadErr) {
+            console.error('Attachment batch upload failed:', uploadErr);
+          }
+        }
+        const attachmentParts = [];
+        if (audioAttachmentCount) attachmentParts.push(`${audioAttachmentCount} audio`);
+        if (fileAttachmentCount) attachmentParts.push(`${fileAttachmentCount} file`);
+        const attachmentMsg = attachmentParts.length ? ` with ${attachmentParts.join(' and ')} attachment(s)` : '';
         statusEl.textContent = `Saved note ${noteRecord.id}${attachmentMsg}`;
         await clearAudio();
+        pendingNoteAttachments = [];
+        document.getElementById('noteAttachmentsInput').value = '';
+        renderNoteAttachmentsList();
         document.getElementById('noteText').value = '';
         document.getElementById('noteTitle').value = '';
         document.getElementById('jobNote').value = 'no';

logs/SESSION_LOG.txt

@@ -3,6 +3,22 @@ PRISM NOTES - SESSION LOG
 Project history, decisions, and architectural milestones
 ================================================================================
 
+[2026-01-10 20:10] MONICA SESSION: Fixed Container Injection Bug
+- Issue: Refactor commit (cee9157) had CONTAINERS + initializeContainers() code
+  but ALSO kept all old HTML in DOM, creating duplicates and preventing injection
+- Root Cause: During refactor, old HTML wasn't removed before injection system added
+- Fix Applied:
+  * Removed all duplicate HTML container elements from DOM (login, notesList, 
+    noteDetail, noteForm)
+  * Restored CONTAINERS object with all 6 templates (login, notesList, noteDetail, 
+    noteForm, conversationForm, conversationsList)
+  * Restored initializeContainers() function to inject templates on page load
+  * Called initializeContainers() BEFORE updateAuthUI() to ensure DOM ready
+  * Added conversation feature support (was added in refactor, now working)
+- Result: Page now dynamically injects all containers from template literals
+- Status: Fixed and committed (c733930)
+- Next: Verify rendering works correctly when accessing page
+
 [2026-01-10 14:00] Container Refactoring: Template Literals (Option 1)
 - Decision: Extracted all container HTML to template literals in index.html
 - Reasoning: Allows independent container updates without touching markup