From 1d3d42d67074171330c1a0368db1572e536d0768 Mon Sep 17 00:00:00 2001
From: aewing <aewing@cardoza.construction>
Date: Sat, 10 Jan 2026 20:48:47 +0000
Subject: [PATCH] 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 | 515 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 488 insertions(+), 27 deletions(-)

diff --git a/index.html b/index.html
index 9ff87d8..0e08e59 100644
--- a/index.html
+++ b/index.html
@@ -62,6 +62,7 @@
         <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">
@@ -74,6 +75,14 @@
           </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>
@@ -101,6 +110,11 @@
         <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>
 
@@ -158,15 +172,17 @@
         </div>
       </div>
     </div>
-    <div class="space-y-2">
+    <div class="space-y-2 relative pb-32">
       <div class="flex items-center gap-3">
-        <button id="recordBtn" class="px-4 py-2 rounded bg-primary text-white font-semibold disabled:opacity-50">Record Audio</button>
         <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">
@@ -194,12 +210,146 @@
       </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>
 
+  <!-- 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>
+        <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>
+
   <script src="https://cdn.jsdelivr.net/npm/pocketbase/dist/pocketbase.umd.js"></script>
   <script>
     const APP_VERSION = '1.0.0-alpha3';
@@ -224,6 +374,7 @@
     let isNoteRecognizing = false;
     let silenceTimer = null;
     let searchSilenceTimer = null;
+    let pendingNoteAttachments = [];
 
     // --- Voice Recognition Setup with auto-stop ---
     function setupTitleVoiceRecognition() {
@@ -493,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');
@@ -501,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');
@@ -508,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');
@@ -517,6 +720,8 @@
         notesListContainer.classList.add('hidden');
         noteDetailContainer.classList.add('hidden');
         noteContainer.classList.add('hidden');
+        conversationsContainer.classList.add('hidden');
+        conversationContainer.classList.add('hidden');
       }
     }
 
@@ -538,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;
+        }
       }
     }
 
@@ -987,12 +1218,59 @@
       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 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() {
@@ -1003,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) {
@@ -1030,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>
@@ -1047,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);
@@ -1125,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];
@@ -1162,6 +1566,23 @@
       loadNotesList();
     });
 
+    document.getElementById('conversationsBtn').addEventListener('click', () => {
+      showConversations();
+    });
+
+    document.getElementById('backToListFromConversationsBtn').addEventListener('click', () => {
+      showNotesList();
+    });
+
+    document.getElementById('newConversationBtn').addEventListener('click', () => {
+      resetConversationForm();
+      showConversationForm();
+    });
+
+    document.getElementById('backToConversationsListBtn').addEventListener('click', () => {
+      showConversations();
+    });
+
     document.getElementById('backToListBtn').addEventListener('click', () => {
       showNotesList();
     });
@@ -1175,6 +1596,18 @@
       showNoteForm();
     });
 
+    document.getElementById('noteAttachmentsInput').addEventListener('change', (e) => {
+      pendingNoteAttachments = Array.from(e.target.files || []);
+      renderNoteAttachmentsList();
+    });
+
+    document.getElementById('clearAttachmentsBtn').addEventListener('click', (e) => {
+      e.preventDefault();
+      pendingNoteAttachments = [];
+      document.getElementById('noteAttachmentsInput').value = '';
+      renderNoteAttachmentsList();
+    });
+
     // Search input + voice
     const notesSearchInput = document.getElementById('notesSearch');
     const searchVoiceBtn = document.getElementById('searchVoiceBtn');
@@ -1313,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);
-            fd.append(ATTACHMENTS_PBID_FIELD, noteRecord.id);
-            const createdAtt = await pb.collection(ATTACHMENTS_COLLECTION).create(fd);
-            attachmentRecords.push(createdAtt);
+            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;
+          }
+          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 attachmentMsg = attachmentRecords.length ? ` with ${attachmentRecords.length} audio segment(s)` : '';
+        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';