From c76739d0d72ecedfb8688de8885cf54bdb9d27c2 Mon Sep 17 00:00:00 2001
From: aewing <aewing@cardoza.construction>
Date: Tue, 24 Mar 2026 17:15:19 +0000
Subject: [PATCH] Update Prism Notes branding and OneNote sync UI

---
 README.md                        |   16 +
 index.html                       | 3761 ++++--------------------------
 package.json                     |    1 +
 server.ts                        |  321 ++-
 tools/user-email-lookup/index.js |   42 +-
 5 files changed, 747 insertions(+), 3394 deletions(-)
diff --git a/README.md b/README.md
index be56e67..a2b7afe 100644
--- a/README.md
+++ b/README.md
@@ -31,3 +31,19 @@ Open http://localhost:3030 and sign in with Microsoft.
 - `getGraphToken()` in `server.ts` is ready for Graph API calls; extend with additional routes as needed.
 - `/api/submit` validates the provided `pbToken` then writes the payload to `PB_COLLECTION`; adjust fields to match your schema.
 - Static file serving uses `index.html` from the repo root.
+
+## OneNote sync (append MVP)
+- Backend endpoint: `POST /api/onenote/append`
+- Required headers:
+	- `Authorization: Bearer <delegated Microsoft access token>`
+	- `x-pb-token: <PocketBase user token>`
+- Current hardcoded target in `server.ts`:
+	- Host: `czflex.sharepoint.com`
+	- Site path: `/sites/Team`
+	- Section ID: `ed504699-67be-47a3-838a-e01ec17198fb`
+	- Page ID: `addbbca7-18ce-4d8d-833e-96cc08d990bc`
+- Frontend buttons:
+	- New note: `Submit + Sync OneNote`
+	- Note detail: `Sync to OneNote`
+
+Important: sync requires a delegated Microsoft token with OneNote write permissions. The UI captures this from PocketBase Microsoft OAuth metadata when available.
diff --git a/index.html b/index.html
index 7cd5b9a..3c3d073 100644
--- a/index.html
+++ b/index.html
@@ -1,1209 +1,205 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Prism Notes</title>
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='75' font-size='75'>📝</text></svg>">
+  <link rel="icon" type="image/png" href="/images/prism.png" />
   <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    tailwind.config = {
-      theme: {
-        extend: {
-          colors: {
-            primary: '#3730a3',
-            secondary: '#4c1d95',
-          }
-        }
-      }
+  <script src="/vendor/msal-browser.js"></script>
+  <style>
+    .panel {
+      border-radius: 1rem;
+      border: 1px solid rgb(30 41 59 / 1);
+      background: rgb(15 23 42 / 0.78);
+      backdrop-filter: blur(8px);
+      padding: 1.25rem;
     }
-  </script>
-  <!-- Import standalone tools -->
-  <script>
-    // Initialize capture tools globally
-    console.log('Initializing capture tools...');
-    
-    window.captureScreenshot = async function() {
-      console.log('captureScreenshot called');
-      try {
-        const mediaStream = await navigator.mediaDevices.getDisplayMedia({
-          video: { mediaSource: 'screen' }
-        });
-        const video = document.createElement('video');
-        video.srcObject = mediaStream;
-        return new Promise((resolve) => {
-          video.onloadedmetadata = () => {
-            const canvas = document.createElement('canvas');
-            canvas.width = video.videoWidth;
-            canvas.height = video.videoHeight;
-            const ctx = canvas.getContext('2d');
-            ctx.drawImage(video, 0, 0);
-            mediaStream.getTracks().forEach(track => track.stop());
-            resolve(canvas);
-          };
-          video.play();
-        });
-      } catch (error) {
-        console.error('Screenshot capture failed:', error);
-        return null;
-      }
-    };
-
-    window.captureSnip = async function() {
-      console.log('captureSnip called');
-      return new Promise((resolve) => {
-        // Hide main app elements before showing dialog
-        const appElements = document.querySelectorAll('body > div:not([style*="z-index"])');
-        appElements.forEach(el => el.style.visibility = 'hidden');
-        
-        navigator.mediaDevices.getDisplayMedia({
-          video: { mediaSource: 'screen' }
-        }).then(mediaStream => {
-          // Restore visibility
-          appElements.forEach(el => el.style.visibility = '');
-          
-          const video = document.createElement('video');
-          video.srcObject = mediaStream;
-          
-          video.onloadedmetadata = () => {
-            const fullCanvas = document.createElement('canvas');
-            fullCanvas.width = video.videoWidth;
-            fullCanvas.height = video.videoHeight;
-            const fullCtx = fullCanvas.getContext('2d');
-            fullCtx.drawImage(video, 0, 0);
-            mediaStream.getTracks().forEach(track => track.stop());
-            
-            // Create fullscreen preview container
-            const container = document.createElement('div');
-            container.style.cssText = `position:fixed;top:0;left:0;width:100%;height:100%;background:black;z-index:99999;overflow:hidden;`;
-            
-            // Create image preview of the captured screen
-            const previewImg = document.createElement('img');
-            previewImg.src = fullCanvas.toDataURL();
-            previewImg.style.cssText = `width:100%;height:100%;object-fit:contain;`;
-            
-            // Create overlay canvas for drawing selection
-            const overlayCanvas = document.createElement('canvas');
-            overlayCanvas.style.cssText = `position:absolute;top:0;left:0;cursor:crosshair;display:none;`;
-            
-            // Create control panel
-            const controlPanel = document.createElement('div');
-            controlPanel.style.cssText = `position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:15px;z-index:100001;`;
-            
-            const fullScreenBtn = document.createElement('button');
-            fullScreenBtn.textContent = 'Share Entire Screen';
-            fullScreenBtn.style.cssText = `padding:12px 24px;background:#10B981;color:white;border:none;border-radius:6px;font-size:16px;font-weight:bold;cursor:pointer;`;
-            
-            const snippetBtn = document.createElement('button');
-            snippetBtn.textContent = 'Snip';
-            snippetBtn.style.cssText = `padding:12px 24px;background:#0EA5E9;color:white;border:none;border-radius:6px;font-size:16px;font-weight:bold;cursor:pointer;`;
-            
-            const cancelBtn = document.createElement('button');
-            cancelBtn.textContent = '✕ Cancel';
-            cancelBtn.style.cssText = `padding:12px 24px;background:#EF4444;color:white;border:none;border-radius:6px;font-size:16px;font-weight:bold;cursor:pointer;`;
-            
-            controlPanel.appendChild(fullScreenBtn);
-            controlPanel.appendChild(snippetBtn);
-            controlPanel.appendChild(cancelBtn);
-            
-            container.appendChild(previewImg);
-            container.appendChild(overlayCanvas);
-            container.appendChild(controlPanel);
-            document.body.appendChild(container);
-            
-            let snippingMode = false;
-            
-            // Wait for image to load
-            previewImg.onload = () => {
-              const rect = previewImg.getBoundingClientRect();
-              overlayCanvas.width = rect.width;
-              overlayCanvas.height = rect.height;
-              
-              const displayWidth = fullCanvas.width;
-              const displayHeight = fullCanvas.height;
-              const scaleX = displayWidth / rect.width;
-              const scaleY = displayHeight / rect.height;
-              
-              let isDrawing = false, startX = 0, startY = 0, endX = 0, endY = 0;
-              const ctx = overlayCanvas.getContext('2d');
-              
-              function drawSelection() {
-                ctx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
-                if (!isDrawing && startX === endX && startY === endY) return;
-                
-                const x = Math.min(startX, endX);
-                const y = Math.min(startY, endY);
-                const w = Math.abs(endX - startX);
-                const h = Math.abs(endY - startY);
-                
-                ctx.strokeStyle = '#0EA5E9';
-                ctx.lineWidth = 3;
-                ctx.strokeRect(x, y, w, h);
-                ctx.fillStyle = 'rgba(14, 165, 233, 0.1)';
-                ctx.fillRect(x, y, w, h);
-                
-                const sz = 12;
-                ctx.fillStyle = '#0EA5E9';
-                ctx.fillRect(x - sz/2, y - sz/2, sz, sz);
-                ctx.fillRect(x + w - sz/2, y - sz/2, sz, sz);
-                ctx.fillRect(x - sz/2, y + h - sz/2, sz, sz);
-                ctx.fillRect(x + w - sz/2, y + h - sz/2, sz, sz);
-              }
-              
-              overlayCanvas.addEventListener('mousedown', (e) => {
-                if (!snippingMode) return;
-                const rect = overlayCanvas.getBoundingClientRect();
-                isDrawing = true;
-                startX = e.clientX - rect.left;
-                startY = e.clientY - rect.top;
-                endX = startX;
-                endY = startY;
-              });
-              
-              overlayCanvas.addEventListener('mousemove', (e) => {
-                if (!snippingMode || !isDrawing) return;
-                const rect = overlayCanvas.getBoundingClientRect();
-                endX = e.clientX - rect.left;
-                endY = e.clientY - rect.top;
-                drawSelection();
-              });
-              
-              overlayCanvas.addEventListener('mouseup', () => {
-                if (!snippingMode || !isDrawing) return;
-                isDrawing = false;
-                const x = Math.min(startX, endX);
-                const y = Math.min(startY, endY);
-                const w = Math.abs(endX - startX);
-                const h = Math.abs(endY - startY);
-                
-                if (w < 10 || h < 10) {
-                  console.warn('Selection too small');
-                  return;
-                }
-                
-                const croppedCanvas = document.createElement('canvas');
-                croppedCanvas.width = w * scaleX;
-                croppedCanvas.height = h * scaleY;
-                const croppedCtx = croppedCanvas.getContext('2d');
-                croppedCtx.drawImage(fullCanvas, x * scaleX, y * scaleY, w * scaleX, h * scaleY, 0, 0, w * scaleX, h * scaleY);
-                
-                cleanup();
-                resolve(croppedCanvas);
-              });
-              
-              fullScreenBtn.addEventListener('click', () => {
-                cleanup();
-                resolve(fullCanvas);
-              });
-              
-              snippetBtn.addEventListener('click', () => {
-                snippingMode = true;
-                overlayCanvas.style.display = 'block';
-                controlPanel.style.display = 'none';
-                console.log('Snipping mode active: Draw rectangle to select. ESC to cancel.');
-              });
-              
-              cancelBtn.addEventListener('click', () => {
-                cleanup();
-                resolve(null);
-              });
-              
-              const handleKeydown = (e) => {
-                if (e.key === 'Escape') {
-                  if (snippingMode) {
-                    snippingMode = false;
-                    overlayCanvas.style.display = 'none';
-                    controlPanel.style.display = 'flex';
-                    ctx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
-                    startX = startY = endX = endY = 0;
-                  } else {
-                    cleanup();
-                    resolve(null);
-                  }
-                }
-              };
-              
-              function cleanup() {
-                document.removeEventListener('keydown', handleKeydown);
-                container.remove();
-              }
-              
-              document.addEventListener('keydown', handleKeydown);
-            };
-          };
-          video.play();
-        }).catch(error => {
-          // Restore visibility on error
-          appElements.forEach(el => el.style.visibility = '');
-          console.error('Capture failed:', error);
-          resolve(null);
-        });
-      });
-    };
-
-    window.canvasToFile = async function(canvas, filename = null) {
-      console.log('canvasToFile called');
-      return new Promise((resolve) => {
-        const name = filename || `screenshot-${Date.now()}.png`;
-        canvas.toBlob((blob) => {
-          const file = new File([blob], name, { type: 'image/png' });
-          resolve(file);
-        });
-      });
-    };
-
-    window.recordScreen = async function(options = {}) {
-      const {
-        maxDuration = 5 * 60 * 1000,
-        mimeType = 'video/webm',
-        onStart = null,
-        onStop = null
-      } = options;
-
-      try {
-        const mediaStream = await navigator.mediaDevices.getDisplayMedia({
-          video: { mediaSource: 'screen' },
-          audio: false
-        });
-
-        const mediaRecorder = new MediaRecorder(mediaStream, { mimeType });
-        const chunks = [];
-        let isRecording = true;
-        let timeoutId = null;
-
-        mediaRecorder.ondataavailable = (event) => {
-          if (event.data.size > 0) {
-            chunks.push(event.data);
-          }
-        };
-
-        mediaRecorder.onstop = () => {
-          isRecording = false;
-          clearTimeout(timeoutId);
-          mediaStream.getTracks().forEach(track => track.stop());
-          if (onStop) onStop();
-        };
-
-        mediaRecorder.start();
-        if (onStart) onStart();
-
-        timeoutId = setTimeout(() => {
-          if (isRecording) {
-            mediaRecorder.stop();
-          }
-        }, maxDuration);
-
-        mediaStream.getVideoTracks()[0].onended = () => {
-          if (isRecording) {
-            mediaRecorder.stop();
-          }
-        };
-
-        return {
-          stop: async () => {
-            return new Promise((resolve) => {
-              if (!isRecording) {
-                resolve(null);
-                return;
-              }
-
-              const stopHandler = () => {
-                mediaRecorder.removeEventListener('stop', stopHandler);
-                const blob = new Blob(chunks, { type: mimeType });
-                const file = new File(
-                  [blob],
-                  `screen-recording-${Date.now()}.webm`,
-                  { type: mimeType }
-                );
-                resolve(file);
-              };
-
-              mediaRecorder.addEventListener('stop', stopHandler);
-              mediaRecorder.stop();
-            });
-          },
-          isRecording: () => isRecording,
-          getDuration: () => mediaRecorder.state === 'recording' ? mediaRecorder.state : 0,
-          mediaStream
-        };
-      } catch (error) {
-        console.error('Screen recording failed:', error);
-        return null;
-      }
-    };
-    
-    console.log('✓ Capture tools initialized successfully');
-    console.log('Available: window.captureScreenshot, window.captureSnip, window.canvasToFile, window.recordScreen');
-    
-    // Alert sound function
-    window.testAlertSound = async function() {
-      try {
-        console.log('🔔 Testing alert sound...');
-        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-        const now = audioContext.currentTime;
-        
-        const playBell = (startTime, volume = 1) => {
-          const osc = audioContext.createOscillator();
-          const gain = audioContext.createGain();
-          osc.connect(gain);
-          gain.connect(audioContext.destination);
-          osc.frequency.setValueAtTime(1000, startTime);
-          osc.frequency.exponentialRampToValueAtTime(600, startTime + 0.15);
-          gain.gain.setValueAtTime(0.3 * volume, startTime);
-          gain.gain.exponentialRampToValueAtTime(0.01, startTime + 0.2);
-          osc.start(startTime);
-          osc.stop(startTime + 0.2);
-        };
-        
-        playBell(now, 1);
-        playBell(now + 0.2, 0.7);
-        console.log('✓ Sound played');
-      } catch (error) {
-        console.error('Failed to play sound:', error);
-      }
-    };
-    console.log('✓ testAlertSound available - call window.testAlertSound()');
-  </script>
+    .btn {
+      border-radius: 0.75rem;
+      padding: 0.55rem 1rem;
+      font-weight: 600;
+      transition: all 120ms ease;
+    }
+    .btn:focus-visible,
+    .field:focus-visible {
+      outline: 2px solid rgb(34 211 238 / 0.8);
+      outline-offset: 1px;
+    }
+    .btn:hover { transform: translateY(-1px); }
+    .btn-secondary {
+      border: 1px solid rgb(51 65 85 / 1);
+      background: rgb(15 23 42 / 1);
+      color: rgb(226 232 240 / 1);
+    }
+    .btn-secondary:hover { border-color: rgb(100 116 139 / 1); }
+    .field {
+      width: 100%;
+      border-radius: 0.75rem;
+      border: 1px solid rgb(51 65 85 / 1);
+      background: rgb(2 6 23 / 1);
+      padding: 0.55rem 0.75rem;
+      font-size: 0.875rem;
+      color: rgb(248 250 252 / 1);
+    }
+    .field::placeholder { color: rgb(100 116 139 / 1); }
+  </style>
 </head>
-<body class="bg-gradient-to-br from-primary to-secondary p-4 sm:p-8 flex flex-col items-center justify-center font-sans relative h-screen overflow-hidden">
-  <!-- Top-right display name -->
-  <div id="userDisplay" class="hidden fixed right-2 text-white text-xs font-semibold drop-shadow z-50 top-1">
-    <span id="userDisplayName"></span>
-  </div>
-
-  <!-- Bottom-left email -->
-  <div id="userEmail" class="hidden absolute bottom-2 left-2 text-white text-xs drop-shadow">
-    <span id="userEmailValue"></span>
-  </div>
-
-  <!-- Bottom-right version -->
-  <div class="fixed bottom-2 right-2 text-white/80 text-xs drop-shadow z-50">
-    v1.0.0-alpha3
-  </div>
-
-  <!-- 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>
-
-  <!-- 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 max-h-[calc(100vh-136px)] overflow-hidden mb-3" style="transform: translateY(-24px);">
-    <div class="flex-shrink-0">
-      <div class="flex flex-row items-center justify-between gap-3">
+<body class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-950 to-slate-900 text-slate-100">
+  <main class="mx-auto max-w-6xl px-6 py-10">
+    <header class="panel mb-8">
+      <div class="flex items-center gap-4">
+        <img src="/images/prism.png" alt="Prism Notes" class="h-14 w-14 rounded-xl object-cover ring-1 ring-slate-600/60" />
         <div>
-          <h2 class="text-lg sm:text-2xl font-bold text-gray-800">Notes</h2>
-        </div>
-        <div class="flex gap-2 flex-wrap">
-          <button id="refreshNotesBtn" class="h-6 px-1.5 py-0 rounded hover:bg-gray-200 text-gray-700 transition flex items-center justify-center" title="Refresh notes">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="w-5 h-5">
-              <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
-            </svg>
-          </button>
-          <button id="newNoteBtn" class="h-6 px-2 sm:px-3 py-0 text-xs leading-none rounded bg-secondary text-white font-semibold flex items-center justify-center">New Note</button>
-          <button id="hiddenNotesBtn" class="h-6 px-2 sm:px-3 py-0 text-xs leading-none rounded bg-gray-600 text-white font-semibold flex items-center justify-center">Hidden Notes</button>
-          <button id="conversationsBtn" class="h-6 px-2 sm:px-3 py-0 text-xs leading-none rounded bg-secondary text-white font-semibold flex items-center justify-center">Conversations</button>
+          <p class="text-xs uppercase tracking-[0.3em] text-cyan-400">Prism Notes</p>
+          <h1 class="mt-1 text-3xl font-semibold tracking-tight">Fresh rebuild</h1>
         </div>
       </div>
-      <div class="w-full mt-3">
-        <div class="flex items-center gap-2 mb-3 flex-wrap">
-          <button id="filterAllBtn" class="px-3 py-1 text-xs rounded border border-gray-400 bg-gray-200 text-gray-700 hover:border-gray-500 transition font-medium">All Notes</button>
-          <button id="filterMySharedBtn" class="px-3 py-1 text-xs rounded border border-green-300 bg-green-100 text-gray-700 hover:border-green-400 transition font-medium">My Shared</button>
-          <button id="filterSharedWithMeBtn" class="px-3 py-1 text-xs rounded border border-blue-300 bg-blue-100 text-gray-700 hover:border-blue-400 transition font-medium">Shared With Me</button>
-          <button id="filterJobBtn" class="px-3 py-1 text-xs rounded border border-pink-400 bg-pink-200 text-gray-700 hover:border-pink-500 transition font-medium">Job Notes</button>
-          <button id="filterManagerBtn" class="px-3 py-1 text-xs rounded border border-orange-400 bg-orange-200 text-gray-700 hover:border-orange-500 transition font-medium">Manager Notes</button>
-          <button id="filterPersonalBtn" class="px-3 py-1 text-xs rounded border border-amber-400 bg-amber-200 text-gray-700 hover:border-amber-500 transition font-medium">Personal Notes</button>
-        </div>
-        <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>
-      <!-- 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-x-hidden 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-2 w-full"></div>
-    </div>
-  </div>
+      <p class="mt-3 text-sm text-slate-300">Clean baseline UI with PocketBase auth, OneNote delegated auth, note submit, and OneNote proof actions.</p>
+    </header>
 
-  <!-- Note Detail Container -->
-  <div id="noteDetailContainer" class="hidden flex flex-col bg-white rounded-2xl shadow-2xl border border-gray-300 max-w-2xl 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 class="flex-1">
-        <div class="text-xs text-gray-500" id="noteDetailMeta"></div>
-        <h2 id="noteDetailTitle" class="text-2xl font-bold text-gray-900 cursor-pointer hover:text-gray-600 transition" title="Double-click to edit">Note</h2>
-        <div id="noteDetailTitleEdit" class="hidden">
-          <input type="text" id="noteDetailTitleInput" class="w-full text-2xl font-bold border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-primary" />
-          <div class="flex gap-2 mt-2">
-            <button id="noteDetailTitleSave" class="px-3 py-1 rounded bg-green-600 text-white text-sm font-medium hover:bg-green-700">Save</button>
-            <button id="noteDetailTitleCancel" class="px-3 py-1 rounded bg-gray-400 text-white text-sm font-medium hover:bg-gray-500">Cancel</button>
+    <section class="mb-6 grid gap-4 md:grid-cols-3">
+      <article class="panel">
+        <p class="text-xs uppercase tracking-wider text-slate-400">Server</p>
+        <p id="healthStatus" class="mt-2 text-sm font-medium">Checking...</p>
+      </article>
+      <article class="panel">
+        <p class="text-xs uppercase tracking-wider text-slate-400">Graph App Token</p>
+        <p id="graphStatus" class="mt-2 text-sm font-medium">Checking...</p>
+      </article>
+      <article class="panel">
+        <p class="text-xs uppercase tracking-wider text-slate-400">PocketBase User</p>
+        <p id="pbStatus" class="mt-2 text-sm font-medium">Not logged in</p>
+      </article>
+    </section>
+
+    <section class="mb-6 grid gap-6 lg:grid-cols-2">
+      <article class="panel p-6">
+        <h2 class="text-xl font-medium">1) Prism Notes Login</h2>
+        <p class="mt-2 text-sm text-slate-300">Uses PocketBase OAuth with Microsoft to validate the Prism Notes user session.</p>
+        <div class="mt-4 flex flex-wrap gap-3">
+          <button id="loginBtn" class="btn bg-cyan-500 text-slate-950 hover:bg-cyan-400">Login with Microsoft</button>
+          <button id="logoutBtn" class="btn btn-secondary">Logout</button>
+        </div>
+      </article>
+
+      <article class="panel p-6">
+        <h2 class="text-xl font-medium">2) OneNote Connect</h2>
+        <p class="mt-2 text-sm text-slate-300">Gets delegated Graph token used for OneNote APIs.</p>
+        <p id="oneNoteAuthStatus" class="mt-3 text-sm font-medium">Disconnected</p>
+        <div class="mt-4 flex flex-wrap gap-3">
+          <button id="connectOneNoteBtn" class="btn bg-emerald-500 text-slate-950 hover:bg-emerald-400">Connect OneNote</button>
+          <button id="refreshOneNoteTokenBtn" class="btn btn-secondary">Refresh token</button>
+        </div>
+      </article>
+    </section>
+
+    <section class="mb-6 grid gap-6 lg:grid-cols-2">
+      <article class="panel p-6">
+        <h2 class="text-xl font-medium">3) Note + Sync</h2>
+        <div class="mt-4 space-y-4">
+          <div>
+            <label class="text-sm font-medium text-slate-300">Title</label>
+            <input id="noteTitle" class="field mt-1" placeholder="Example: Billing update" />
+          </div>
+          <div>
+            <label class="text-sm font-medium text-slate-300">Job Number</label>
+            <input id="noteJobNumber" class="field mt-1" placeholder="Optional" />
+          </div>
+          <div>
+            <label class="text-sm font-medium text-slate-300">Type</label>
+            <select id="noteType" class="field mt-1">
+              <option value="personal">personal</option>
+              <option value="job">job</option>
+              <option value="billing">billing</option>
+            </select>
+          </div>
+          <div>
+            <label class="text-sm font-medium text-slate-300">Body</label>
+            <textarea id="noteBody" rows="8" class="field mt-1" placeholder="Write note content..."></textarea>
           </div>
         </div>
-      </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 id="noteDetailBodyDisplay" class="min-h-56 text-gray-800 leading-relaxed whitespace-pre-wrap border border-gray-100 rounded-lg p-3 bg-gray-50 mb-3 cursor-pointer hover:bg-gray-100 transition" title="Double-click to edit"></div>
-      <div id="noteDetailBodyEdit" class="hidden">
-        <textarea id="noteDetailBodyInput" class="w-full h-56 border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary text-gray-800 leading-relaxed"></textarea>
-        <div class="flex gap-2 mt-2">
-          <button id="noteDetailBodySave" class="px-3 py-1 rounded bg-green-600 text-white text-sm font-medium hover:bg-green-700">Save</button>
-          <button id="noteDetailBodyCancel" class="px-3 py-1 rounded bg-gray-400 text-white text-sm font-medium hover:bg-gray-500">Cancel</button>
+        <div class="mt-4 flex flex-wrap gap-3">
+          <button id="submitNoteBtn" class="btn bg-indigo-500 text-white hover:bg-indigo-400">Submit to Prism Notes</button>
+          <button id="syncOneNoteBtn" class="btn bg-violet-500 text-white hover:bg-violet-400">Sync to OneNote</button>
         </div>
-      </div>
-      <div class="space-y-2">
-        <div id="noteDetailAudioLabel" 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 class="space-y-2">
-        <div id="noteDetailAttachmentsLabel" 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 class="flex-shrink-0 flex justify-end pt-2 border-t border-gray-200">
-      <button id="noteDetailDeleteBtn" class="px-4 py-2 rounded bg-red-600 text-white text-sm font-medium hover:bg-red-700 transition">Delete</button>
-    </div>
-  </div>
+      </article>
 
-  <!-- Note + Audio Container -->
-  <div id="noteContainer" class="hidden self-center bg-white rounded-2xl shadow-2xl max-w-xl w-full py-[8px] px-8 space-y-2 mt-4" style="transform: translateY(-33px);">
-    <div class="flex items-center gap-2 flex-wrap">
-      <button id="backToListBtn" class="px-2 sm:px-3 py-1 sm:py-2 text-xs sm:text-sm rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
-      <h2 class="text-lg sm:text-2xl font-bold text-gray-800">New Note</h2>
-    </div>
-    <div class="space-y-2.5">
-      <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="shareNoteInput" class="block text-sm font-medium text-gray-700 mb-2">Share Note (comma-separated names)</label>
-        <input type="text" id="shareNoteInput" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter names separated by commas (e.g., John, Sarah, Mike)">
-        <div id="selectedUsersContainer" class="flex flex-wrap gap-2 mt-3">
-          <!-- Selected user capsules will appear here -->
-        </div>
-      </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 -mt-8 gap-2">
-      <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>
+      <article class="panel p-6">
+        <h2 class="text-xl font-medium">4) OneNote Proof (Direct Graph)</h2>
+        <p class="mt-2 text-sm text-slate-300">Creates a page via site-scoped endpoints — bypasses the <code>me/onenote</code> 5,000-item tenant limit.</p>
+        <div class="mt-4 space-y-4">
+          <div class="flex flex-wrap items-center gap-3">
+            <button id="resolveSectionsBtn" class="btn btn-secondary">Resolve site sections</button>
+            <span id="resolveStatus" class="text-xs text-slate-400"></span>
           </div>
-        </div>
-      </div>
-      <div id="recordStatus" class="text-xs text-gray-500"></div>
-    </div>
-    <div class="space-y-2">
-      <div class="relative">
-        <div class="flex items-center gap-2">
-          <button id="attachmentMenuBtn" class="px-2 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-100 transition flex items-center gap-2" type="button" title="Add attachment">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5">
-              <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
-            </svg>
-          </button>
-          <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>
-        
-        <!-- Attachment Menu -->
-        <div id="attachmentMenu" class="hidden absolute top-0 left-0 ml-28 w-48 rounded border border-gray-300 bg-white shadow-lg z-10">
-        <button id="attachImageBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center justify-between gap-2" type="button">
-          <span class="flex items-center gap-2">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
-            </svg>
-            Attach Image
-          </span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-            <polyline points="9 18 15 12 9 6"/>
-          </svg>
-        </button>
-        <div id="imageSubmenu" class="hidden bg-gray-50 border-t border-gray-200">
-          <button id="takePhotoBtn" class="mobile-only w-full text-left px-6 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-              <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/>
-            </svg>
-            Take Photo
-          </button>
-          <button id="takeSnipBtn" class="desktop-only hidden w-full text-left px-6 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-              <path d="M3 3h6v6H3zM15 3h6v6h-6zM3 15h6v6H3zM15 15h6v6h-6z"/><line x1="9" y1="3" x2="9" y2="24"/><line x1="15" y1="3" x2="15" y2="24"/><line x1="3" y1="9" x2="24" y2="9"/><line x1="3" y1="15" x2="24" y2="15"/>
-            </svg>
-            Screenshot/Clip
-          </button>
-          <button id="selectImageBtn" class="w-full text-left px-6 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-              <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/>
-            </svg>
-            Select Image
-          </button>
-        </div>
-        <button id="attachVideoBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center justify-between gap-2" type="button">
-          <span class="flex items-center gap-2">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-              <polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
-            </svg>
-            Attach Video
-          </span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-            <polyline points="9 18 15 12 9 6"/>
-          </svg>
-        </button>
-        <div id="videoSubmenu" class="hidden bg-gray-50 border-t border-gray-200">
-          <button id="recordVideoBtn" class="mobile-only w-full text-left px-6 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-              <circle cx="12" cy="13" r="9"/><path d="M12 10v6"/>
-            </svg>
-            Take Video
-          </button>
-          <button id="recordScreenBtn" class="desktop-only hidden w-full text-left px-6 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-              <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/><circle cx="12" cy="10" r="2"/>
-            </svg>
-            Record Screen
-          </button>
-          <button id="selectVideoBtn" class="w-full text-left px-6 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-              <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/>
-            </svg>
-            Select Video
-          </button>
-        </div>
-        <button id="attachFileBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-            <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/>
-          </svg>
-          Attach File
-        </button>
-      </div>
-      
-      <!-- Hidden file inputs -->
-      <input id="imageInput" type="file" class="hidden" accept="image/*" multiple>
-      <input id="imageCameraInput" type="file" class="hidden" accept="image/*" multiple capture="environment">
-      <input id="videoInput" type="file" class="hidden" accept="video/*">
-      <input id="videoCameraInput" type="file" class="hidden" accept="video/*" capture="environment">
-      <input id="fileInput" type="file" class="hidden" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar">
-      
-      <div id="noteAttachmentsList" class="space-y-1"></div>
-      </div>
-    </div>
-    <div class="flex items-center gap-3 -mt-8">
-      <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>
-
-  <!-- Hidden Notes Container -->
-  <div id="hiddenNotesContainer" class="hidden flex flex-col bg-gray-200 rounded-2xl shadow-2xl border border-gray-400 max-w-5xl w-full p-6 gap-4 max-h-[calc(100vh-136px)] overflow-hidden mb-3" style="transform: translateY(-24px);">
-    <div class="flex-shrink-0">
-      <div class="flex flex-row items-center justify-between gap-3">
-        <div>
-          <h2 class="text-lg sm:text-2xl font-bold text-gray-800">Hidden Notes</h2>
-        </div>
-        <div class="flex gap-2 flex-wrap">
-          <button id="backToNotesFromHiddenBtn" class="px-2 sm:px-3 py-1 sm:py-2 text-xs sm:text-sm rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
-        </div>
-      </div>
-    </div>
-    <div class="flex-1 overflow-x-hidden overflow-y-auto">
-      <div id="hiddenNotesStatus" class="text-sm text-gray-600"></div>
-      <div id="hiddenNotesEmpty" class="hidden text-sm text-gray-500">No hidden notes.</div>
-      <div id="hiddenNotesGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 w-full"></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 flex-row items-center justify-between gap-3">
-        <div>
-          <h2 class="text-lg sm:text-2xl font-bold text-gray-800">Conversations</h2>
-        </div>
-        <div class="flex gap-2 flex-wrap">
-          <button id="backToListFromConversationsBtn" class="px-2 sm:px-3 py-1 sm:py-2 text-xs sm:text-sm rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
-          <button id="newConversationBtn" class="px-3 sm:px-4 py-1 sm:py-2 text-xs sm:text-sm rounded bg-secondary text-white font-semibold">New Conversation</button>
-        </div>
-      </div>
-    </div>
-    <div class="flex-1 overflow-x-hidden 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-2 w-full"></div>
-    </div>
-  </div>
-
-  <!-- Conversation Form Container -->
-  <div id="conversationContainer" class="hidden self-center bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6">
-    <div class="flex items-center gap-2 flex-wrap">
-      <button id="backToConversationsListBtn" class="px-2 sm:px-3 py-1 sm:py-2 text-xs sm:text-sm rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Conversations</button>
-      <h2 class="text-lg sm:text-2xl font-bold text-gray-800">New Conversation</h2>
-    </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>
+          <p class="text-xs text-slate-500">Fetches sections from <code>sites/czflex.sharepoint.com:/sites/Team/onenote/sections</code> — site-scoped only, no tenant scan.</p>
+          <div>
+            <label class="text-sm font-medium text-slate-300">Section</label>
+            <select id="sectionSelect" class="field mt-1"><option value="">— click Resolve —</option></select>
           </div>
-        </div>
-      </div>
-      <div id="conversationRecordStatus" class="text-xs text-gray-500"></div>
-    </div>
-
-    <div class="space-y-2">
-      <div class="relative">
-        <div class="flex items-center gap-2">
-          <button id="conversationAttachmentMenuBtn" class="px-2 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-100 transition flex items-center gap-2" type="button" title="Add attachment">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5">
-              <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
-            </svg>
-          </button>
-          <button id="conversationClearAttachmentsBtn" 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="conversationAttachmentsSummary" class="text-xs text-gray-600">No attachments selected.</div>
-        </div>
-        
-        <!-- Conversation Attachment Menu -->
-        <div id="conversationAttachmentMenu" class="hidden absolute top-0 left-0 ml-28 w-48 rounded border border-gray-300 bg-white shadow-lg z-10">
-          <button id="conversationAttachImageBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center justify-between gap-2" type="button">
-            <span class="flex items-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
-              </svg>
-              Attach Image
-            </span>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-              <polyline points="9 18 15 12 9 6"/>
-            </svg>
-          </button>
-          <div id="conversationImageSubmenu" class="hidden bg-gray-50 border-t border-gray-200">
-            <button id="conversationTakePhotoBtn" class="mobile-only w-full text-left px-6 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-                <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/>
-              </svg>
-              Take Photo
-            </button>
-            <button id="conversationTakeSnipBtn" class="desktop-only hidden w-full text-left px-6 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-                <path d="M3 3h6v6H3zM15 3h6v6h-6zM3 15h6v6H3zM15 15h6v6h-6z"/><line x1="9" y1="3" x2="9" y2="24"/><line x1="15" y1="3" x2="15" y2="24"/><line x1="3" y1="9" x2="24" y2="9"/><line x1="3" y1="15" x2="24" y2="15"/>
-              </svg>
-              Screenshot/Clip
-            </button>
-            <button id="conversationSelectImageBtn" class="w-full text-left px-6 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-                <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/>
-              </svg>
-              Select Image
-            </button>
+          <div>
+            <label class="text-sm font-medium text-slate-300">Proof Page Title</label>
+            <input id="proofTitle" class="field mt-1" />
           </div>
-          <button id="conversationAttachVideoBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center justify-between gap-2" type="button">
-            <span class="flex items-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-                <polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
-              </svg>
-              Attach Video
-            </span>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-              <polyline points="9 18 15 12 9 6"/>
-            </svg>
-          </button>
-          <div id="conversationVideoSubmenu" class="hidden bg-gray-50 border-t border-gray-200">
-            <button id="conversationRecordVideoBtn" class="mobile-only w-full text-left px-6 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-                <circle cx="12" cy="13" r="9"/><path d="M12 10v6"/>
-              </svg>
-              Take Video
-            </button>
-            <button id="conversationRecordScreenBtn" class="desktop-only hidden w-full text-left px-6 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/><circle cx="12" cy="10" r="2"/>
-              </svg>
-              Record Screen
-            </button>
-            <button id="conversationSelectVideoBtn" class="w-full text-left px-6 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-                <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/>
-              </svg>
-              Select Video
-            </button>
+          <div>
+            <label class="text-sm font-medium text-slate-300">Proof Message</label>
+            <textarea id="proofBody" rows="6" class="field mt-1"></textarea>
           </div>
-          <button id="conversationAttachFileBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
-              <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/>
-            </svg>
-            Attach File
-          </button>
+          <button id="createProofPageBtn" class="btn bg-emerald-500 text-slate-950 hover:bg-emerald-400">Create OneNote Proof Page</button>
         </div>
-        
-        <!-- Hidden file inputs for conversation -->
-        <input id="conversationImageInput" type="file" class="hidden" accept="image/*" multiple>
-        <input id="conversationImageCameraInput" type="file" class="hidden" accept="image/*" multiple capture="environment">
-        <input id="conversationVideoInput" type="file" class="hidden" accept="video/*">
-        <input id="conversationVideoCameraInput" type="file" class="hidden" accept="video/*" capture="environment">
-        <input id="conversationFileInput" type="file" class="hidden" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar">
-        
-        <div id="conversationAttachmentsList" class="space-y-1"></div>
-      </div>
-    </div>
+      </article>
+    </section>
 
-    <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>
+    <section class="panel p-6">
+      <h2 class="text-xl font-medium">Output</h2>
+      <pre id="output" class="mt-4 min-h-[220px] overflow-auto rounded-xl border border-slate-800 bg-slate-950 p-4 text-xs leading-5 text-slate-200"></pre>
+    </section>
+  </main>
 
-  <script src="https://cdn.jsdelivr.net/npm/pocketbase/dist/pocketbase.umd.js"></script>
-  <script src="tools/user-email-lookup/index.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);
+  <script type="module">
+    import PocketBase from 'https://cdn.jsdelivr.net/npm/pocketbase@0.26.5/+esm';
 
-    // 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 = [];
-    let pendingConversationAttachments = [];
+    const PB_URL = 'http://127.0.0.1:8090';
+    const PB_AUTH_COLLECTION = 'Users';
+    const SCOPES = ['User.Read', 'Notes.ReadWrite.All', 'Sites.Read.All', 'offline_access'];
 
-    // --- Voice Recognition Setup with auto-stop ---
-    function setupTitleVoiceRecognition() {
-      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-      if (!SpeechRecognition) {
-        console.warn('Web Speech API not supported');
-        document.getElementById('titleVoiceBtn').disabled = true;
-        return null;
-      }
+    const pb = new PocketBase(PB_URL);
 
-      const recognition = new SpeechRecognition();
-      recognition.continuous = true;
-      recognition.interimResults = true;
-      recognition.lang = 'en-US';
+    const output = document.getElementById('output');
+    const healthStatus = document.getElementById('healthStatus');
+    const graphStatus = document.getElementById('graphStatus');
+    const pbStatus = document.getElementById('pbStatus');
+    const oneNoteAuthStatus = document.getElementById('oneNoteAuthStatus');
+    const resolveStatus = document.getElementById('resolveStatus');
+    const sectionSelect = document.getElementById('sectionSelect');
+    let resolvedSiteId = null;
 
-      recognition.onstart = () => {
-        isTitleRecognizing = true;
-        document.getElementById('titleVoiceBtn').classList.add('text-red-600');
-        document.getElementById('titleVoiceBtn').classList.remove('text-purple-600');
-      };
+    const noteTitle = document.getElementById('noteTitle');
+    const noteJobNumber = document.getElementById('noteJobNumber');
+    const noteType = document.getElementById('noteType');
+    const noteBody = document.getElementById('noteBody');
 
-      recognition.onresult = (event) => {
-        let finalTranscript = '';
-        for (let i = 0; i < event.results.length; i++) {
-          if (event.results[i].isFinal) {
-            finalTranscript += event.results[i][0].transcript + ' ';
-          }
-        }
-        
-        if (finalTranscript) {
-          const titleInput = document.getElementById('noteTitle');
-          titleInput.value = (titleInput.value + finalTranscript).trim();
-          
-          // Reset silence timer
-          clearTimeout(silenceTimer);
-          silenceTimer = setTimeout(() => {
-            stopTitleVoiceRecognition();
-          }, 2000);
-        }
-      };
+    const proofTitle = document.getElementById('proofTitle');
+    const proofBody = document.getElementById('proofBody');
 
-      recognition.onerror = (event) => {
-        console.error('Speech recognition error:', event.error);
-        stopTitleVoiceRecognition();
-      };
+    proofTitle.value = `Prism Notes Proof ${new Date().toISOString()}`;
+    proofBody.value = [
+      'Proof that OneNote can be updated programmatically from outside OneNote.',
+      `Created: ${new Date().toISOString()}`,
+      `Origin: ${location.origin}`,
+    ].join('\n');
 
-      recognition.onend = () => {
-        if (isTitleRecognizing) {
-          isTitleRecognizing = false;
-          document.getElementById('titleVoiceBtn').classList.remove('text-red-600');
-          document.getElementById('titleVoiceBtn').classList.add('text-purple-600');
-        }
-      };
+    let msalClient = null;
+    let delegatedAccessToken = '';
+    let delegatedExpiresAt = 0;
 
-      return recognition;
+    function writeOutput(value) {
+      output.textContent = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
     }
 
-    function setupNoteVoiceRecognition() {
-      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-      if (!SpeechRecognition) {
-        console.warn('Web Speech API not supported');
-        document.getElementById('noteVoiceBtn').disabled = true;
-        return null;
-      }
-
-      const recognition = new SpeechRecognition();
-      recognition.continuous = true;
-      recognition.interimResults = true;
-      recognition.lang = 'en-US';
-
-      recognition.onstart = () => {
-        isNoteRecognizing = true;
-        document.getElementById('noteVoiceBtn').classList.add('text-red-600');
-        document.getElementById('noteVoiceBtn').classList.remove('text-purple-600');
-      };
-
-      recognition.onresult = (event) => {
-        let finalTranscript = '';
-        for (let i = 0; i < event.results.length; i++) {
-          if (event.results[i].isFinal) {
-            finalTranscript += event.results[i][0].transcript + ' ';
-          }
-        }
-        
-        if (finalTranscript) {
-          const noteTextArea = document.getElementById('noteText');
-          noteTextArea.value = (noteTextArea.value + finalTranscript).trim() + ' ';
-          noteTextArea.scrollTop = noteTextArea.scrollHeight;
-          
-          // Reset silence timer
-          clearTimeout(silenceTimer);
-          silenceTimer = setTimeout(() => {
-            stopNoteVoiceRecognition();
-          }, 2000);
-        }
-      };
-
-      recognition.onerror = (event) => {
-        console.error('Speech recognition error:', event.error);
-        stopNoteVoiceRecognition();
-      };
-
-      recognition.onend = () => {
-        if (isNoteRecognizing) {
-          isNoteRecognizing = false;
-          document.getElementById('noteVoiceBtn').classList.remove('text-red-600');
-          document.getElementById('noteVoiceBtn').classList.add('text-purple-600');
-        }
-      };
-
-      return recognition;
-    }
-
-    function startTitleVoiceRecognition() {
-      if (!titleRecognition) {
-        titleRecognition = setupTitleVoiceRecognition();
-        if (!titleRecognition) return;
-      }
-      try {
-        clearTimeout(silenceTimer);
-        titleRecognition.start();
-      } catch (e) {
-        console.log('Recognition error:', e);
-      }
-    }
-
-    function stopTitleVoiceRecognition() {
-      isTitleRecognizing = false;
-      clearTimeout(silenceTimer);
-      if (titleRecognition) {
-        try {
-          titleRecognition.stop();
-        } catch (e) {
-          console.log('Error stopping recognition:', e);
-        }
-      }
-      document.getElementById('titleVoiceBtn').classList.remove('text-red-600');
-      document.getElementById('titleVoiceBtn').classList.add('text-purple-600');
-    }
-
-    function startNoteVoiceRecognition() {
-      if (!noteRecognition) {
-        noteRecognition = setupNoteVoiceRecognition();
-        if (!noteRecognition) return;
-      }
-      try {
-        clearTimeout(silenceTimer);
-        noteRecognition.start();
-      } catch (e) {
-        console.log('Recognition error:', e);
-      }
-    }
-
-    function stopNoteVoiceRecognition() {
-      isNoteRecognizing = false;
-      clearTimeout(silenceTimer);
-      if (noteRecognition) {
-        try {
-          noteRecognition.stop();
-        } catch (e) {
-          console.log('Error stopping recognition:', e);
-        }
-      }
-      document.getElementById('noteVoiceBtn').classList.remove('text-red-600');
-      document.getElementById('noteVoiceBtn').classList.add('text-purple-600');
-    }
-
-    // Voice button click handlers
-    document.getElementById('titleVoiceBtn').addEventListener('click', () => {
-      if (isTitleRecognizing) {
-        stopTitleVoiceRecognition();
-      } else {
-        startTitleVoiceRecognition();
-      }
-    });
-
-    document.getElementById('noteVoiceBtn').addEventListener('click', () => {
-      if (isNoteRecognizing) {
-        stopNoteVoiceRecognition();
-      } else {
-        startNoteVoiceRecognition();
-      }
-    });
-
-    // Job Note selector change handler
-    document.getElementById('jobNote').addEventListener('change', (e) => {
-      const jobNumberContainer = document.getElementById('jobNumberContainer');
-      if (e.target.value === 'yes') {
-        jobNumberContainer.classList.remove('hidden');
-      } else {
-        jobNumberContainer.classList.add('hidden');
-        document.getElementById('jobNumber').value = '';
-      }
-    });
-
-    // --- Rich text helpers (TipTap-style JSON) ---
-    function tiptapDocFromText(text) {
-      const safe = (text || '').replace(/\r\n|\r|\n/g, '\n');
-      const lines = safe.split('\n');
-      const content = lines.map(line => ({
-        type: 'paragraph',
-        content: line ? [{ type: 'text', text: line }] : []
-      }));
-      return { type: 'doc', content };
-    }
-
-    function tiptapToPlainText(doc) {
-      if (!doc) return '';
-      try {
-        const parts = [];
-        const walk = (node) => {
-          if (!node) return;
-          if (Array.isArray(node)) {
-            node.forEach(walk);
-            return;
-          }
-          if (node.type === 'text' && node.text) {
-            parts.push(node.text);
-            return;
-          }
-          if (node.type === 'hardBreak') {
-            parts.push('\n');
-            return;
-          }
-          if (node.content) {
-            let beforeLen = parts.length;
-            walk(node.content);
-            // Add newline between block nodes
-            const blockTypes = ['paragraph', 'heading', 'blockquote', 'codeBlock'];
-            if (blockTypes.includes(node.type) && parts.length !== beforeLen) {
-              parts.push('\n');
-            }
-          }
-        };
-        walk(doc);
-        return parts.join('').replace(/\n{3,}/g, '\n\n').trim();
-      } catch (e) {
-        return typeof doc === 'string' ? doc : JSON.stringify(doc);
-      }
-    }
-
-    // --- HTML helpers for PocketBase editor fields ---
-    function plainTextToHTML(text) {
-      const safe = (text || '').replace(/\r\n|\r|\n/g, '\n');
-      const lines = safe.split('\n');
-      // Wrap each line in <p>, preserve blank lines
-      const html = lines.map(line => `<p>${escapeHtml(line)}</p>`).join('');
-      return html;
-    }
-
-    function escapeHtml(str) {
-      return String(str)
+    function escapeHtml(value) {
+      return String(value || '')
         .replace(/&/g, '&amp;')
         .replace(/</g, '&lt;')
         .replace(/>/g, '&gt;')
@@ -1211,2182 +207,309 @@
         .replace(/'/g, '&#39;');
     }
 
-    function htmlToPlainText(html) {
+    function updatePbStatus() {
+      if (pb.authStore?.isValid) {
+        const email = pb.authStore.model?.email || '(unknown user)';
+        pbStatus.textContent = `Logged in: ${email}`;
+      } else {
+        pbStatus.textContent = 'Not logged in';
+      }
+    }
+
+    function hasUsableToken() {
+      if (!delegatedAccessToken) return false;
+      if (!delegatedExpiresAt) return true;
+      return delegatedExpiresAt - 60000 > Date.now();
+    }
+
+    function updateOneNoteStatus() {
+      oneNoteAuthStatus.textContent = hasUsableToken()
+        ? `Connected (expires ${new Date(delegatedExpiresAt).toLocaleTimeString()})`
+        : 'Disconnected';
+    }
+
+    async function loadHealth() {
       try {
-        const div = document.createElement('div');
-        div.innerHTML = html || '';
-        return (div.innerText || '').trim();
+        const resp = await fetch('/health');
+        const data = await resp.json();
+        healthStatus.textContent = resp.ok ? `OK (${data.pbDB || 'pb configured'})` : 'Unavailable';
       } catch {
-        return html || '';
+        healthStatus.textContent = 'Unavailable';
       }
     }
 
-    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;
+    async function loadGraphStatus() {
+      try {
+        const resp = await fetch('/api/graph/status');
+        const data = await resp.json().catch(() => ({}));
+        graphStatus.textContent = resp.ok && data?.active
+          ? `Active (exp ${new Date(data.expiresOnISO).toLocaleTimeString()})`
+          : `Inactive (${data?.error || 'no token'})`;
+      } catch {
+        graphStatus.textContent = 'Inactive';
       }
-      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';
+    async function getMsalConfig() {
+      const resp = await fetch('/api/auth/msal-config');
+      const data = await resp.json().catch(() => ({}));
+      if (!resp.ok || !data?.success) {
+        throw new Error(data?.message || 'MSAL config unavailable');
+      }
+      return data;
     }
 
-    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)));
+    async function ensureMsalClient() {
+      if (msalClient) return msalClient;
+      if (!window.msal?.PublicClientApplication) {
+        throw new Error('MSAL browser library not loaded');
+      }
+      const config = await getMsalConfig();
+      msalClient = new window.msal.PublicClientApplication({
+        auth: {
+          clientId: config.clientId,
+          authority: config.authority,
+          redirectUri: config.redirectUri || window.location.origin,
+        },
+        cache: {
+          cacheLocation: 'localStorage',
+          storeAuthStateInCookie: false,
+        },
       });
-      return kinds;
+      await msalClient.initialize();
+      return msalClient;
     }
 
-    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;
+    function captureToken(result) {
+      delegatedAccessToken = result?.accessToken || '';
+      delegatedExpiresAt = result?.expiresOn?.getTime?.() || 0;
+      updateOneNoteStatus();
     }
 
-    // Update auth UI based on login state
-    function updateAuthUI() {
-      const loginContainer = document.getElementById('loginContainer');
-      const userDisplay = document.getElementById('userDisplay');
-      const userEmail = document.getElementById('userEmail');
-      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');
-        userEmail.classList.remove('hidden');
-        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');
-        userDisplay.classList.add('hidden');
-        userEmail.classList.add('hidden');
-        document.getElementById('loginError').classList.add('hidden');
-        notesListContainer.classList.add('hidden');
-        noteDetailContainer.classList.add('hidden');
-        noteContainer.classList.add('hidden');
-        conversationsContainer.classList.add('hidden');
-        conversationContainer.classList.add('hidden');
+    async function handleMsalRedirect() {
+      const client = await ensureMsalClient();
+      const result = await client.handleRedirectPromise();
+      if (result?.accessToken) {
+        captureToken(result);
+        writeOutput({ message: 'OneNote connected successfully.' });
       }
-    }
-
-    // Check for tokens and log success
-    async function checkTokens() {
-      const pbToken = pb.authStore.token;
-      
-      if (!pbToken) {
-        console.log('❌ No PocketBase token found');
-        return;
-      }
-      
-      console.log('✓ PocketBase token:', pbToken ? '(present)' : '(missing)');
-      
-      try {
-        const healthResp = await fetch('/health');
-        const health = await healthResp.json();
-        if (health.ok) {
-          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();
-          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 {
-          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');
-        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;
-        }
-      }
-    }
-
-    async function ensureUserLogged() {
-      // If already have a valid token, just refresh to get model details
-      if (pb.authStore.isValid && pb.authStore.token) {
+      const accounts = client.getAllAccounts();
+      if (accounts.length && !hasUsableToken()) {
         try {
-          const refresh = await pb.collection('Users').authRefresh();
-          const record = refresh?.record || pb.authStore.record || pb.authStore.model;
-          const meta = refresh?.meta || {};
-          const model = pb.authStore.model;
-          const displayName = record?.name || model?.name || meta?.name || record?.email || model?.email || meta?.email || 'Unknown User';
-          const email = record?.email || model?.email || meta?.email || '(no email)';
-          displayNameCache = displayName;
-          userEmailCache = email;
-          document.getElementById('userDisplayName').textContent = displayName;
-          document.getElementById('userEmailValue').textContent = email;
-          console.log('User record:', record);
-          console.log('User meta:', meta);
-          console.log('Auth store model:', model);
-          console.log(`User display name: ${displayName}`);
-          console.log(`User email: ${email}`);
-          console.log('PB token:', pb.authStore.token ? '(present)' : '(missing)');
-          updateAuthUI();
-          await checkTokens();
-          return true;
-        } catch (e) {
-          console.warn('Existing token invalid, clearing and reauth needed', e);
-          pb.authStore.clear();
+          const silent = await client.acquireTokenSilent({ scopes: SCOPES, account: accounts[0] });
+          captureToken(silent);
+        } catch {
+          updateOneNoteStatus();
         }
       }
-      return false;
     }
 
-    // Handle login button click
-    document.getElementById('loginBtn').addEventListener('click', async (e) => {
-      e.preventDefault();
-      const loginBtn = document.getElementById('loginBtn');
-      const loginError = document.getElementById('loginError');
-      
-      loginBtn.disabled = true;
-      loginBtn.textContent = 'Checking session...';
-      loginError.classList.add('hidden');
+    async function connectOneNoteInteractive() {
+      const client = await ensureMsalClient();
+      const accounts = client.getAllAccounts();
+      await client.acquireTokenRedirect({
+        scopes: SCOPES,
+        account: accounts[0] || undefined,
+        prompt: 'select_account',
+        redirectStartPage: window.location.href,
+      });
+    }
 
-      // If we already have a valid token, just use it
-      const hadToken = await ensureUserLogged();
-      if (hadToken) {
-        loginBtn.disabled = false;
-        loginBtn.textContent = 'Login with Microsoft';
-        return;
+    async function refreshOneNoteToken() {
+      const client = await ensureMsalClient();
+      const accounts = client.getAllAccounts();
+      if (!accounts.length) {
+        throw new Error('Connect OneNote first');
+      }
+      const result = await client.acquireTokenSilent({ scopes: SCOPES, account: accounts[0] });
+      captureToken(result);
+      writeOutput({ message: 'OneNote token refreshed.' });
+    }
+
+    async function graphJson(url, options = {}) {
+      if (!hasUsableToken()) {
+        throw new Error('Connect OneNote first');
+      }
+      const resp = await fetch(url, {
+        ...options,
+        headers: {
+          Authorization: `Bearer ${delegatedAccessToken}`,
+          Accept: 'application/json',
+          ...(options.headers || {}),
+        },
+      });
+      const text = await resp.text();
+      let data = {};
+      try {
+        data = text ? JSON.parse(text) : {};
+      } catch {
+        data = { raw: text };
+      }
+      if (!resp.ok) {
+        throw new Error(JSON.stringify({ status: resp.status, data }, null, 2));
+      }
+      return data;
+    }
+
+    async function loginPocketBase() {
+      writeOutput('Opening PocketBase Microsoft login...');
+      await pb.collection(PB_AUTH_COLLECTION).authWithOAuth2({ provider: 'microsoft' });
+      updatePbStatus();
+      writeOutput({ message: 'PocketBase login completed.', user: pb.authStore.model?.email || null });
+    }
+
+    function logoutPocketBase() {
+      pb.authStore.clear();
+      updatePbStatus();
+      writeOutput({ message: 'PocketBase session cleared.' });
+    }
+
+    function buildNotePayload() {
+      const bodyPlain = noteBody.value.trim();
+      if (!bodyPlain) {
+        throw new Error('Note body is required');
+      }
+      const title = noteTitle.value.trim() || 'Untitled';
+      return {
+        noteId: globalThis.crypto?.randomUUID?.() || `note-${Date.now()}`,
+        title,
+        bodyPlain,
+        noteType: noteType.value || 'personal',
+        userEmail: pb.authStore.model?.email || '',
+        jobNumber: noteJobNumber.value.trim(),
+      };
+    }
+
+    async function submitNoteToPrismNotes() {
+      if (!pb.authStore.isValid || !pb.authStore.token) {
+        throw new Error('PocketBase login required');
+      }
+      const payload = buildNotePayload();
+      const resp = await fetch('/api/submit', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...payload,
+          pbToken: pb.authStore.token,
+        }),
+      });
+      const data = await resp.json().catch(() => ({}));
+      if (!resp.ok) {
+        throw new Error(data?.message || 'Submit failed');
+      }
+      writeOutput({ message: 'Submitted to Prism Notes', response: data, payload });
+    }
+
+    async function syncCurrentNoteToOneNote() {
+      if (!pb.authStore.isValid || !pb.authStore.token) {
+        throw new Error('PocketBase login required');
+      }
+      if (!hasUsableToken()) {
+        throw new Error('OneNote connection required');
       }
 
-      // Otherwise perform OAuth
-      loginBtn.textContent = 'Logging in...';
+      const payload = buildNotePayload();
+      const resp = await fetch('/api/onenote/append', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${delegatedAccessToken}`,
+          'x-pb-token': pb.authStore.token,
+        },
+        body: JSON.stringify(payload),
+      });
+      const data = await resp.json().catch(() => ({}));
+      if (!resp.ok || !data?.success) {
+        throw new Error(data?.message || 'OneNote sync failed');
+      }
+      writeOutput({ message: 'Synced to configured OneNote target', response: data, payload });
+    }
+
+    async function resolveSiteSections() {
+      resolveStatus.textContent = 'Resolving…';
+      if (!hasUsableToken()) {
+        resolveStatus.textContent = '⚠ Connect OneNote first (section 2)';
+        throw new Error('OneNote connection required — click Connect OneNote in section 2 first');
+      }
       try {
-        const authData = await pb.collection('Users').authWithOAuth2({ provider: 'microsoft' });
-        console.log('✓ Logged in with Microsoft');
-        const record = authData?.record || pb.authStore.record || pb.authStore.model;
-        const meta = authData?.meta || {};
-        const model = pb.authStore.model;
-        const displayName = record?.name || model?.name || meta?.name || record?.email || model?.email || meta?.email || 'Unknown User';
-        const email = record?.email || model?.email || meta?.email || '(no email)';
-        displayNameCache = displayName;
-        userEmailCache = email;
-        document.getElementById('userDisplayName').textContent = displayName;
-        document.getElementById('userEmailValue').textContent = email;
-        console.log('User record:', record);
-        console.log('User meta:', meta);
-        console.log('Auth store model:', model);
-        console.log(`User display name: ${displayName}`);
-        console.log(`User email: ${email}`);
-        console.log('PB token:', pb.authStore.token ? '(present)' : '(missing)');
-        
-        // Initialize user alert system for shared notes
+        const resp = await fetch('/api/onenote/site-sections', {
+          headers: { Authorization: `Bearer ${delegatedAccessToken}` },
+        });
+        const data = await resp.json().catch(() => ({}));
+        if (!resp.ok || !data?.success) {
+          const msg = data?.message || JSON.stringify(data?.error || data);
+          resolveStatus.textContent = `⚠ ${msg}`;
+          throw new Error(msg);
+        }
+        resolvedSiteId = data.siteId;
+        const sections = Array.isArray(data.sections) ? data.sections : [];
+        sectionSelect.innerHTML = '';
+        for (const s of sections) {
+          const opt = document.createElement('option');
+          opt.value = s.id;
+          opt.textContent = `${s.displayName || s.id} — ${s.id}`;
+          sectionSelect.appendChild(opt);
+        }
+        resolveStatus.textContent = `✓ ${sections.length} section(s) loaded`;
+        writeOutput({ message: `Resolved ${sections.length} section(s)`, siteId: resolvedSiteId, sections });
+      } catch (e) {
+        if (!resolveStatus.textContent.startsWith('⚠')) resolveStatus.textContent = `⚠ ${e.message}`;
+        throw e;
+      }
+    }
+
+    async function createProofPage() {
+      if (!hasUsableToken()) throw new Error('OneNote connection required');
+      const sectionId = sectionSelect.value.trim();
+      if (!sectionId) throw new Error('Click "Resolve site sections" first and select a section');
+      if (!resolvedSiteId) throw new Error('Site ID not resolved — click "Resolve site sections" first');
+      const title = proofTitle.value.trim() || `Prism Notes Proof ${new Date().toISOString()}`;
+      const message = proofBody.value.trim() || 'Proof page';
+      const bodyHtml = escapeHtml(message).replace(/\r\n|\r|\n/g, '<br/>');
+      const html = [
+        '<!DOCTYPE html>',
+        '<html>',
+        '  <head>',
+        `    <title>${escapeHtml(title)}</title>`,
+        '  </head>',
+        '  <body>',
+        `    <p><strong>${escapeHtml(title)}</strong></p>`,
+        `    <p>${bodyHtml}</p>`,
+        '  </body>',
+        '</html>',
+      ].join('');
+
+      const created = await graphJson(
+        `https://graph.microsoft.com/v1.0/sites/${resolvedSiteId}/onenote/sections/${sectionId}/pages`,
+        { method: 'POST', headers: { 'Content-Type': 'text/html' }, body: html },
+      );
+      writeOutput({ message: 'Proof page created', siteId: resolvedSiteId, sectionId, created });
+    }
+
+    function bind(id, handler) {
+      document.getElementById(id).addEventListener('click', async () => {
         try {
-          const alertedNotes = new Set();
-          
-          async function verifyUserMatch(firstName) {
-            try {
-              console.log(`  Checking: firstName="${firstName}", email="${email}"`);
-              const records = await pb.collection('Associations').getList(1, 50, {
-                filter: `first_name = "${firstName}"`,
-              });
-              
-              console.log(`    Found ${records.items.length} records`);
-              
-              const match = records.items.find((record) => {
-                console.log(`    Checking: ${record.first_name} ${record.last_name} (${record.email})`);
-                return record.email === email;
-              });
-              
-              return !!match;
-            } catch (error) {
-              console.error('Error verifying user match:', error);
-              return false;
-            }
-          }
-          
-          console.log('🔔 Starting user alert monitoring...');
-          await pb.collection('Notes').subscribe('*', async (event) => {
-            try {
-              const note = event.record;
-              console.log(`📝 Note event (${event.action}):`, note.title, `shared=${note.shared}`);
-              
-              if (!note.shared) {
-                return;
-              }
-              
-              const sharedWithNames = Array.isArray(note.shared_with)
-                ? note.shared_with
-                : typeof note.shared_with === 'string'
-                  ? note.shared_with.split(',').map((n) => n.trim())
-                  : [];
-              
-              console.log(`  → shared_with:`, sharedWithNames);
-              
-              let userIsRecipient = false;
-              for (const sharedName of sharedWithNames) {
-                const firstName = sharedName.split(' ')[0];
-                if (await verifyUserMatch(firstName)) {
-                  userIsRecipient = true;
-                  break;
-                }
-              }
-              
-              if (!userIsRecipient || alertedNotes.has(note.id)) {
-                return;
-              }
-              
-              alertedNotes.add(note.id);
-              console.log(`🔔🔔 ALERT! Note "${note.title}" shared with you`);
-              await window.testAlertSound();
-            } catch (error) {
-              console.error('Error processing note event:', error);
-            }
-          });
-          
-          console.log('✓ User alert monitoring started');
+          await handler();
         } catch (error) {
-          console.error('Failed to initialize user alert system:', error);
-        }
-        
-        updateAuthUI();
-        await checkTokens();
-      } catch (error) {
-        console.error(error);
-        loginError.textContent = `Login failed: ${error.message}`;
-        loginError.classList.remove('hidden');
-      } finally {
-        loginBtn.disabled = false;
-        loginBtn.textContent = 'Login with Microsoft';
-      }
-    });
-
-    // Initial auth UI update
-    updateAuthUI();
-    
-    // If already logged in, use existing token
-    if (pb.authStore.isValid && pb.authStore.token) {
-      ensureUserLogged();
-    }
-
-    // --- Audio recording setup with segmented silence handling ---
-    let audioContext = null;
-    let analyser = null;
-    let recordingStream = null;
-    let silenceCheckInterval = null;
-    let lastSoundAt = 0;
-    let stoppingSegment = false;
-    const SILENCE_THRESHOLD = 0.01; // Volume threshold for silence
-    const SEGMENT_SILENCE_MS = 2000; // pause a segment after 2s of silence
-    const SESSION_SILENCE_MS = 3500; // end entire session after 3.5s of silence
-    let recordingSessionActive = false;
-    let segmentActive = false;
-    let currentSegmentChunks = [];
-    let recordedSegments = [];
-    recordedBlob = null; // reuse existing variable for merged preview
-    let hasHeardSpeech = false;
-    let sessionStartAt = 0;
-
-    function computeRms() {
-      if (!analyser) return 0;
-      const bufferLength = analyser.frequencyBinCount;
-      const dataArray = new Uint8Array(bufferLength);
-      analyser.getByteTimeDomainData(dataArray);
-      let sum = 0;
-      for (let i = 0; i < bufferLength; i++) {
-        const normalized = (dataArray[i] - 128) / 128;
-        sum += normalized * normalized;
-      }
-      return Math.sqrt(sum / bufferLength);
-    }
-
-    async function ensureStream() {
-      if (recordingStream) return recordingStream;
-      try {
-        recordingStream = await navigator.mediaDevices.getUserMedia({
-          audio: {
-            autoGainControl: true,
-          },
-        });
-      } catch (err) {
-        console.error('Microphone access failed:', err);
-        document.getElementById('recordStatus').textContent = 'Microphone access denied or unavailable.';
-        throw err;
-      }
-
-      audioContext = new (window.AudioContext || window.webkitAudioContext)();
-      analyser = audioContext.createAnalyser();
-      const source = audioContext.createMediaStreamSource(recordingStream);
-      source.connect(analyser);
-      analyser.fftSize = 2048;
-      return recordingStream;
-    }
-
-    function startSilenceMonitor() {
-      if (silenceCheckInterval) return;
-      silenceCheckInterval = setInterval(checkSilence, 120);
-    }
-
-    function stopSilenceMonitor() {
-      if (silenceCheckInterval) {
-        clearInterval(silenceCheckInterval);
-        silenceCheckInterval = null;
-      }
-    }
-
-    function cleanupStream() {
-      stopSilenceMonitor();
-      if (audioContext) {
-        audioContext.close();
-        audioContext = null;
-      }
-      mediaRecorder = null;
-      if (recordingStream) {
-        recordingStream.getTracks().forEach((t) => t.stop());
-        recordingStream = null;
-      }
-      analyser = null;
-    }
-
-    function updateCombinedPreview() {
-      const audioEl = document.getElementById('audioPreview');
-      if (!recordedSegments.length) {
-        recordedBlob = null;
-        audioEl.src = '';
-        audioEl.classList.add('hidden');
-        document.getElementById('audioPlayer').classList.add('hidden');
-        document.getElementById('recordStatus').textContent = '';
-        return;
-      }
-
-      const type = recordedSegments[0]?.blob?.type || 'audio/webm';
-      recordedBlob = new Blob(recordedSegments.map((s) => s.blob), { type });
-      audioEl.src = URL.createObjectURL(recordedBlob);
-      audioEl.volume = 1.0;
-      audioEl.classList.remove('hidden');
-      document.getElementById('audioPlayer').classList.remove('hidden');
-      document.getElementById('recordStatus').textContent = `Segments recorded: ${recordedSegments.length}`;
-    }
-
-    function startSegment() {
-      if (!recordingStream) return;
-      currentSegmentChunks = [];
-      mediaRecorder = new MediaRecorder(recordingStream);
-      const recorderRef = mediaRecorder;
-      segmentActive = true;
-      stoppingSegment = false;
-      lastSoundAt = Date.now();
-      mediaRecorder.ondataavailable = (e) => {
-        if (e.data && e.data.size > 0) currentSegmentChunks.push(e.data);
-      };
-      mediaRecorder.onstop = () => {
-        if (currentSegmentChunks.length) {
-          const blob = new Blob(currentSegmentChunks, { type: recorderRef.mimeType });
-          recordedSegments.push({ blob, name: `segment-${recordedSegments.length + 1}.webm` });
-          updateCombinedPreview();
-        }
-        segmentActive = false;
-        if (mediaRecorder === recorderRef) {
-          mediaRecorder = null;
-        }
-        stoppingSegment = false;
-      };
-      mediaRecorder.start();
-      document.getElementById('recordStatus').textContent = `Recording segment ${recordedSegments.length + 1}…`;
-    }
-
-    function stopSegment() {
-      return new Promise((resolve) => {
-        if (stoppingSegment) {
-          resolve();
-          return;
-        }
-        if (mediaRecorder && mediaRecorder.state === 'recording') {
-          stoppingSegment = true;
-          const onStop = () => {
-            mediaRecorder.removeEventListener('stop', onStop);
-            resolve();
-          };
-          mediaRecorder.addEventListener('stop', onStop);
-          mediaRecorder.stop();
-        } else {
-          segmentActive = false;
-          stoppingSegment = false;
-          resolve();
+          writeOutput({ error: error?.message || String(error) });
         }
       });
     }
 
-    async function startRecording() {
-      const recordBtn = document.getElementById('recordBtn');
-      const stopBtn = document.getElementById('stopBtn');
-      try {
-        if (recordingSessionActive) return;
-        await ensureStream();
-        recordedSegments = [];
-        recordedBlob = null;
-        segmentActive = false;
-        hasHeardSpeech = false;
-        sessionStartAt = Date.now();
-        recordingSessionActive = true;
-        lastSoundAt = sessionStartAt;
-        startSegment();
-        startSilenceMonitor();
-        recordBtn.disabled = true;
-        stopBtn.disabled = false;
-        stopBtn.classList.remove('hidden');
-      } catch (err) {
-        console.error('Failed to start recording:', err);
-        document.getElementById('recordStatus').textContent = 'Recording not available.';
-        recordBtn.disabled = false;
-        stopBtn.disabled = true;
-        stopBtn.classList.add('hidden');
-      }
-    }
-
-    async function endRecordingSession(reason) {
-      recordingSessionActive = false;
-      stopSilenceMonitor();
-      await stopSegment();
-      cleanupStream();
-      const recordBtn = document.getElementById('recordBtn');
-      const stopBtn = document.getElementById('stopBtn');
-      recordBtn.disabled = false;
-      stopBtn.disabled = true;
-      stopBtn.classList.add('hidden');
-      if (reason) {
-        document.getElementById('recordStatus').textContent = reason;
-      }
-      hasHeardSpeech = false;
-    }
-
-    async function stopRecording() {
-      await endRecordingSession('Recording stopped.');
-    }
-
-    function checkSilence() {
-      if (!recordingSessionActive || !analyser) return;
-      const now = Date.now();
-      const rms = computeRms();
-
-      if (rms >= SILENCE_THRESHOLD) {
-        hasHeardSpeech = true;
-        lastSoundAt = now;
-        if (!segmentActive) {
-          startSegment();
-        }
-        return;
-      }
-
-      // If we have not yet heard speech, allow up to SESSION_SILENCE_MS before ending
-      if (!hasHeardSpeech) {
-        if (now - sessionStartAt >= SESSION_SILENCE_MS) {
-          endRecordingSession('Stopped after silence.');
-        }
-        return;
-      }
-
-      if (segmentActive && !stoppingSegment && now - lastSoundAt >= SEGMENT_SILENCE_MS) {
-        stopSegment();
-      }
-
-      if (!segmentActive && now - lastSoundAt >= SESSION_SILENCE_MS) {
-        endRecordingSession('Stopped after silence.');
-      }
-    }
-
-    async function clearAudio() {
-      await endRecordingSession('Audio cleared.');
-      recordedSegments = [];
-      recordedBlob = null;
-      const audioEl = document.getElementById('audioPreview');
-      audioEl.src = '';
-      audioEl.classList.add('hidden');
-      document.getElementById('audioPlayer').classList.add('hidden');
-      document.getElementById('audioMenu').classList.add('hidden');
-      document.getElementById('progressFill').style.width = '0%';
-      document.getElementById('currentTime').textContent = '0:00';
-      document.getElementById('durationTime').textContent = '0:00';
-      document.getElementById('playPauseBtn').textContent = '▶';
-      document.getElementById('recordStatus').textContent = '';
-    }
-
-    document.getElementById('recordBtn').addEventListener('click', startRecording);
-    document.getElementById('stopBtn').addEventListener('click', () => {
-      stopRecording();
-    });
-    // Audio options menu
-    const audioMenuContainer = document.getElementById('audioMenuContainer');
-    const audioMenuBtn = document.getElementById('audioMenuBtn');
-    const audioMenu = document.getElementById('audioMenu');
-    const removeAudioBtn = document.getElementById('removeAudioBtn');
-    const audioEl = document.getElementById('audioPreview');
-    const playPauseBtn = document.getElementById('playPauseBtn');
-    const progressTrack = document.getElementById('progressTrack');
-    const progressFill = document.getElementById('progressFill');
-    const currentTimeLabel = document.getElementById('currentTime');
-    const durationTimeLabel = document.getElementById('durationTime');
-
-    function formatTime(seconds) {
-      if (isNaN(seconds)) return '0:00';
-      const m = Math.floor(seconds / 60);
-      const s = Math.floor(seconds % 60).toString().padStart(2, '0');
-      return `${m}:${s}`;
-    }
-
-    function updateProgress() {
-      if (!audioEl.duration || isNaN(audioEl.duration)) return;
-      const pct = (audioEl.currentTime / audioEl.duration) * 100;
-      progressFill.style.width = `${pct}%`;
-      currentTimeLabel.textContent = formatTime(audioEl.currentTime);
-      durationTimeLabel.textContent = formatTime(audioEl.duration);
-    }
-
-    playPauseBtn.addEventListener('click', () => {
-      if (audioEl.paused) {
-        audioEl.play();
-        playPauseBtn.textContent = '⏸';
-      } else {
-        audioEl.pause();
-        playPauseBtn.textContent = '▶';
-      }
-    });
-
-    audioEl.addEventListener('timeupdate', updateProgress);
-    audioEl.addEventListener('loadedmetadata', updateProgress);
-    audioEl.addEventListener('ended', () => {
-      playPauseBtn.textContent = '▶';
-      updateProgress();
-    });
-
-    progressTrack.addEventListener('click', (e) => {
-      if (!audioEl.duration || isNaN(audioEl.duration)) return;
-      const rect = progressTrack.getBoundingClientRect();
-      const ratio = (e.clientX - rect.left) / rect.width;
-      audioEl.currentTime = Math.max(0, Math.min(audioEl.duration * ratio, audioEl.duration));
-      updateProgress();
-    });
-    if (audioMenuBtn && audioMenu && removeAudioBtn && audioMenuContainer) {
-      audioMenuBtn.addEventListener('click', (e) => {
-        e.preventDefault();
-        audioMenu.classList.toggle('hidden');
-      });
-      removeAudioBtn.addEventListener('click', async (e) => {
-        e.preventDefault();
-        audioMenu.classList.add('hidden');
-        await clearAudio();
-      });
-      document.addEventListener('click', (e) => {
-        if (!audioMenuContainer.contains(e.target)) {
-          audioMenu.classList.add('hidden');
-        }
-      });
-    }
-
-    // --- Notes list + detail views ---
-    let notesCache = {};
-    let notesList = [];
-    let searchQuery = '';
-    let currentFilter = 'all'; // 'all', 'myshared', 'sharedwithme', 'job', 'manager', 'personal'
-    let searchRecognition = null;
-    let isSearchRecognizing = false;
-
-    function formatDateShort(dt) {
-      try {
-        const d = new Date(dt);
-        const mm = String(d.getMonth() + 1).padStart(2, '0');
-        const dd = String(d.getDate()).padStart(2, '0');
-        const yyyy = d.getFullYear();
-        let hrs = d.getHours();
-        const mins = String(d.getMinutes()).padStart(2, '0');
-        const ampm = hrs >= 12 ? 'PM' : 'AM';
-        hrs = hrs % 12;
-        if (hrs === 0) hrs = 12;
-        const hh = String(hrs).padStart(2, '0');
-        return `${mm}/${dd}/${yyyy} ${hh}:${mins} ${ampm}`;
-      } catch { return ''; }
-    }
-
-    function showNotesList() {
-      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');
-      document.getElementById('hiddenNotesContainer').classList.add('hidden');
-    }
-
-    function showHiddenNotes() {
-      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.add('hidden');
-      document.getElementById('hiddenNotesContainer').classList.remove('hidden');
-      renderHiddenNotes();
-    }
-
-    function renderHiddenNotes() {
-      // Color palette for shared with person names (different from green)
-      const personColorPalette = [
-        { bg: 'bg-blue-200', border: 'border-blue-400', text: 'text-blue-900' },
-        { bg: 'bg-purple-200', border: 'border-purple-400', text: 'text-purple-900' },
-        { bg: 'bg-indigo-200', border: 'border-indigo-400', text: 'text-indigo-900' },
-        { bg: 'bg-cyan-200', border: 'border-cyan-400', text: 'text-cyan-900' },
-        { bg: 'bg-teal-200', border: 'border-teal-400', text: 'text-teal-900' },
-        { bg: 'bg-sky-200', border: 'border-sky-400', text: 'text-sky-900' },
-        { bg: 'bg-lime-200', border: 'border-lime-400', text: 'text-lime-900' },
-        { bg: 'bg-rose-200', border: 'border-rose-400', text: 'text-rose-900' },
-      ];
-      
-      // Map to store consistent colors for each person
-      const personColorMap = {};
-      
-      function getPersonColor(name) {
-        if (!personColorMap[name]) {
-          // Generate consistent hash-based color index for this person
-          let hash = 0;
-          for (let i = 0; i < name.length; i++) {
-            hash = ((hash << 5) - hash) + name.charCodeAt(i);
-            hash = hash & hash; // Convert to 32-bit integer
-          }
-          const colorIndex = Math.abs(hash) % personColorPalette.length;
-          personColorMap[name] = personColorPalette[colorIndex];
-        }
-        return personColorMap[name];
-      }
-      
-      const hiddenNotes = notesList.filter(n => n.hidden);
-      const grid = document.getElementById('hiddenNotesGrid');
-      const empty = document.getElementById('hiddenNotesEmpty');
-      const status = document.getElementById('hiddenNotesStatus');
-      
-      grid.innerHTML = '';
-      status.textContent = '';
-      
-      if (!hiddenNotes.length) {
-        empty.classList.remove('hidden');
-        return;
-      }
-      empty.classList.add('hidden');
-      
-      const frag = document.createDocumentFragment();
-      hiddenNotes.forEach((note) => {
-        const card = document.createElement('button');
-        card.type = 'button';
-        card.dataset.noteId = note.id;
-        const type = (note.type || 'personal').toLowerCase();
-        
-        // Determine styling based on note sharing status
-        let typeClasses;
-        if (note._sharedWithMe) {
-          // Light blue for notes shared WITH the current user
-          typeClasses = 'bg-blue-100 border border-blue-300 hover:border-blue-400';
-        } else if (note.shared) {
-          // Green for notes created by current user and shared with others
-          typeClasses = 'bg-green-100 border border-green-300 hover:border-green-400';
-        } else {
-          // Type-based colors for non-shared notes
-          typeClasses = {
-            personal: 'bg-amber-100 border border-amber-300 hover:border-amber-400',
-            manager: 'bg-orange-200 border border-orange-400 hover:border-orange-500',
-            job: 'bg-pink-200 border border-pink-400 hover:border-pink-500',
-          }[type] || 'bg-gray-100 border border-gray-300 hover:border-primary/60';
-        }
-        
-        card.className = `text-left ${typeClasses} hover:shadow-md transition rounded-xl px-2 py-0.5 space-y-0 h-full flex flex-col`;
-        const title = note.title || 'Untitled';
-        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 atts = note._attachments || [];
-        const typeSet = buildKindSetFromAttachments(atts);
-        function iconBtnHtml(kind) {
-          const map = {
-            image: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',
-            video: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>',
-            audio: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 3.89a9 9 0 0 1 0 12.22M18.5 8.5a5 5 0 0 1 0 7"/></svg>',
-            file: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>',
-          };
-          return `<button type="button" class="p-0.5 sm:p-1 rounded hover:bg-gray-200 text-gray-700 transition flex-shrink-0" data-attachment-button data-attachment-kind="${kind}" title="${kind}" style="width:24px;height:24px;min-width:24px;display:flex;align-items:center;justify-content:center;">${map[kind] || ''}</button>`;
-        }
-        const attachmentIcons = ['image', 'video', 'file', 'audio']
-          .filter((k) => typeSet.has(k))
-          .map(iconBtnHtml)
-          .join('');
-        
-        // Create type bubble and shared with capsules for shared notes only
-        let typeBubble = '';
-        let sharedWithDisplay = '';
-        if (note.shared) {
-          const typeColorMap = {
-            personal: { bg: 'bg-amber-300', border: 'border-amber-400' },
-            manager: { bg: 'bg-orange-400', border: 'border-orange-500' },
-            job: { bg: 'bg-pink-400', border: 'border-pink-500' },
-          };
-          const typeColor = typeColorMap[type] || { bg: 'bg-gray-300', border: 'border-gray-400' };
-          typeBubble = `<span class="inline-block w-3 h-3 rounded-full ${typeColor.bg} ${typeColor.border} border flex-shrink-0" title="${escapeHtml(type)}"></span>`;
-          
-          if (note.shared_with && note.shared_with.length > 0) {
-            const sharedNames = Array.isArray(note.shared_with) ? note.shared_with : (typeof note.shared_with === 'string' ? note.shared_with.split(',').map(n => n.trim()) : []);
-            const capsules = sharedNames.map(name => {
-              const firstName = name.split(' ')[0];
-              const colors = getPersonColor(name);
-              return `<span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold ${colors.bg} ${colors.border} border ${colors.text}">${escapeHtml(firstName)}</span>`;
-            }).join('');
-            sharedWithDisplay = `<div class="flex items-center flex-wrap gap-1 justify-end">${capsules}</div>`;
-          }
-        }
-        
-        card.innerHTML = `
-          <div class="flex items-start justify-between gap-2">
-            <div class="font-semibold text-gray-900 truncate">${escapeHtml(title)}</div>
-            <div class="flex items-center gap-1 flex-shrink-0">
-              <div class="text-xs text-gray-500">${formatDateShort(note.created)}</div>
-              <button type="button" class="unhide-note-btn text-gray-500 hover:text-green-600 transition flex-shrink-0" title="Unhide note" style="font-size: 14px; padding: 0; width: 20px; height: 20px;">🔍</button>
-            </div>
-          </div>
-          <div class="flex items-start gap-2 flex-1">
-            <div class="text-sm text-gray-700 line-clamp-1 flex-1">${escapeHtml(snippet || '(empty)')}</div>
-            ${note.shared ? `<div class="flex items-center gap-1 flex-shrink-0">${typeBubble}</div>` : ''}
-          </div>
-          <div class="flex items-center justify-between text-xs text-gray-600 w-full">
-            <div class="flex items-center gap-1">
-              ${attachmentIcons}
-            </div>
-            <div class="flex items-center gap-1">
-              ${note.shared ? sharedWithDisplay : ''}
-            </div>
-          </div>
-        `;
-        
-        // Add unhide button event listener
-        card.querySelector('.unhide-note-btn')?.addEventListener('click', async (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          try {
-            await pb.collection(NOTES_COLLECTION).update(note.id, { hidden: false });
-            loadNotesList();
-            showHiddenNotes();
-          } catch (err) {
-            console.error('Error unhiding note:', err);
-          }
-        });
-        
-        frag.appendChild(card);
-      });
-      grid.appendChild(frag);
-    }
-
-    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');
-      document.getElementById('hiddenNotesContainer').classList.add('hidden');
-      // Initialize email lookup for sharing
-      if (window.setupUserEmailLookup) {
-        window.setupUserEmailLookup(pb, '#selectedUsersContainer');
-      }
-    }
-
-    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');
-      // Initialize email lookup for sharing
-      if (window.setupUserEmailLookup) {
-        window.setupUserEmailLookup(pb, '#selectedUsersContainer');
-      }
-    }
-
-    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 renderConversationAttachmentsList() {
-      const listEl = document.getElementById('conversationAttachmentsList');
-      const summaryEl = document.getElementById('conversationAttachmentsSummary');
-      listEl.innerHTML = '';
-      if (!pendingConversationAttachments.length) {
-        summaryEl.textContent = 'No attachments selected.';
-        return;
-      }
-      summaryEl.textContent = `${pendingConversationAttachments.length} file(s) selected`;
-      const frag = document.createDocumentFragment();
-      pendingConversationAttachments.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() {
-      document.getElementById('noteTitle').value = '';
-      document.getElementById('noteText').value = '';
-      document.getElementById('jobNote').value = 'no';
-      document.getElementById('noteType').value = 'personal';
-      document.getElementById('jobNumber').value = '';
-      document.getElementById('jobNumberContainer').classList.add('hidden');
-      document.getElementById('shareNoteInput').value = '';
-      selectedUsers = [];
-      renderSelectedUsers();
-      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');
-      pendingConversationAttachments = [];
-      document.getElementById('conversationImageInput').value = '';
-      document.getElementById('conversationVideoInput').value = '';
-      document.getElementById('conversationFileInput').value = '';
-      renderConversationAttachmentsList();
-    }
-
-    function renderNotesList(items) {
-      // Color palette for shared with person names (different from green)
-      const personColorPalette = [
-        { bg: 'bg-blue-200', border: 'border-blue-400', text: 'text-blue-900' },
-        { bg: 'bg-purple-200', border: 'border-purple-400', text: 'text-purple-900' },
-        { bg: 'bg-indigo-200', border: 'border-indigo-400', text: 'text-indigo-900' },
-        { bg: 'bg-cyan-200', border: 'border-cyan-400', text: 'text-cyan-900' },
-        { bg: 'bg-teal-200', border: 'border-teal-400', text: 'text-teal-900' },
-        { bg: 'bg-sky-200', border: 'border-sky-400', text: 'text-sky-900' },
-        { bg: 'bg-lime-200', border: 'border-lime-400', text: 'text-lime-900' },
-        { bg: 'bg-rose-200', border: 'border-rose-400', text: 'text-rose-900' },
-      ];
-      
-      // Map to store consistent colors for each person
-      const personColorMap = {};
-      
-      function getPersonColor(name) {
-        if (!personColorMap[name]) {
-          // Generate consistent hash-based color index for this person
-          let hash = 0;
-          for (let i = 0; i < name.length; i++) {
-            hash = ((hash << 5) - hash) + name.charCodeAt(i);
-            hash = hash & hash; // Convert to 32-bit integer
-          }
-          const colorIndex = Math.abs(hash) % personColorPalette.length;
-          personColorMap[name] = personColorPalette[colorIndex];
-        }
-        return personColorMap[name];
-      }
-      
-      const grid = document.getElementById('notesGrid');
-      const empty = document.getElementById('notesEmpty');
-      grid.innerHTML = '';
-      if (!items.length) {
-        empty.classList.remove('hidden');
-        return;
-      }
-      empty.classList.add('hidden');
-      const frag = document.createDocumentFragment();
-      items.forEach((note) => {
-        const card = document.createElement('button');
-        card.type = 'button';
-        card.dataset.noteId = note.id;
-        const type = (note.type || 'personal').toLowerCase();
-        
-        // Determine styling based on note sharing status
-        let typeClasses;
-        if (note._sharedWithMe) {
-          // Light blue for notes shared WITH the current user
-          typeClasses = 'bg-blue-100 border border-blue-300 hover:border-blue-400';
-        } else if (note.shared) {
-          // Green for notes created by current user and shared with others
-          typeClasses = 'bg-green-100 border border-green-300 hover:border-green-400';
-        } else {
-          // Type-based colors for non-shared notes
-          typeClasses = {
-            personal: 'bg-amber-100 border border-amber-300 hover:border-amber-400',
-            manager: 'bg-orange-200 border border-orange-400 hover:border-orange-500',
-            job: 'bg-pink-200 border border-pink-400 hover:border-pink-500',
-          }[type] || 'bg-gray-100 border border-gray-300 hover:border-primary/60';
-        }
-        
-        card.className = `text-left ${typeClasses} hover:shadow-md transition rounded-xl px-2 py-0.5 space-y-0 h-full flex flex-col`;
-        const title = note.title || 'Untitled';
-        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 atts = note._attachments || [];
-        const typeSet = buildKindSetFromAttachments(atts);
-        function iconBtnHtml(kind) {
-          const map = {
-            image: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',
-            video: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>',
-            audio: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 3.89a9 9 0 0 1 0 12.22M18.5 8.5a5 5 0 0 1 0 7"/></svg>',
-            file: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>',
-          };
-          return `<button type="button" class="p-0.5 sm:p-1 rounded hover:bg-gray-200 text-gray-700 transition flex-shrink-0" data-attachment-button data-attachment-kind="${kind}" title="${kind}" style="width:24px;height:24px;min-width:24px;display:flex;align-items:center;justify-content:center;">${map[kind] || ''}</button>`;
-        }
-        const attachmentIcons = ['image', 'video', 'file', 'audio']
-          .filter((k) => typeSet.has(k))
-          .map(iconBtnHtml)
-          .join('');
-        
-        // Create type bubble and shared with capsules for shared notes only
-        let typeBubble = '';
-        let sharedWithDisplay = '';
-        if (note.shared) {
-          const typeColorMap = {
-            personal: { bg: 'bg-amber-300', border: 'border-amber-400' },
-            manager: { bg: 'bg-orange-400', border: 'border-orange-500' },
-            job: { bg: 'bg-pink-400', border: 'border-pink-500' },
-          };
-          const typeColor = typeColorMap[type] || { bg: 'bg-gray-300', border: 'border-gray-400' };
-          typeBubble = `<span class="inline-block w-3 h-3 rounded-full ${typeColor.bg} ${typeColor.border} border flex-shrink-0" title="${escapeHtml(type)}"></span>`;
-          
-          if (note.shared_with && note.shared_with.length > 0) {
-            const sharedNames = Array.isArray(note.shared_with) ? note.shared_with : (typeof note.shared_with === 'string' ? note.shared_with.split(',').map(n => n.trim()) : []);
-            const capsules = sharedNames.map(name => {
-              const firstName = name.split(' ')[0];
-              const colors = getPersonColor(name);
-              return `<span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold ${colors.bg} ${colors.border} border ${colors.text}">${escapeHtml(firstName)}</span>`;
-            }).join('');
-            sharedWithDisplay = `<div class="flex items-center flex-wrap gap-1 justify-end">${capsules}</div>`;
-          }
-        }
-        
-        card.innerHTML = `
-          <div class="flex items-start justify-between gap-2">
-            <div class="font-semibold text-gray-900 truncate">${escapeHtml(title)}</div>
-            <div class="flex items-center gap-1 flex-shrink-0">
-              <div class="text-xs text-gray-500">${formatDateShort(note.created)}</div>
-              <button type="button" class="hide-note-btn text-gray-500 hover:text-orange-600 transition flex-shrink-0" title="Hide note" style="font-size: 14px; padding: 0; width: 20px; height: 20px;">🔍</button>
-            </div>
-          </div>
-          <div class="flex items-start gap-2 flex-1">
-            <div class="text-sm text-gray-700 line-clamp-1 flex-1">${escapeHtml(snippet || '(empty)')}</div>
-            ${note.shared ? `<div class="flex items-center gap-1 flex-shrink-0">${typeBubble}</div>` : ''}
-          </div>
-          <div class="flex items-center justify-between text-xs text-gray-600 w-full">
-            <div class="flex items-center gap-1">
-              ${attachmentIcons}
-            </div>
-            <div class="flex items-center gap-1">
-              ${note.shared ? sharedWithDisplay : ''}
-            </div>
-          </div>
-        `;
-        
-        // Add hide button event listener
-        card.querySelector('.hide-note-btn')?.addEventListener('click', async (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          try {
-            await pb.collection(NOTES_COLLECTION).update(note.id, { hidden: true });
-            loadNotesList();
-          } catch (err) {
-            console.error('Error hiding note:', err);
-          }
-        });
-        
-        frag.appendChild(card);
-      });
-      grid.appendChild(frag);
-    }
-
-    async function loadNotesList() {
-      const status = document.getElementById('notesListStatus');
-      if (!status) return;
-      status.textContent = 'Loading notes...';
-      try {
-        const res = await pb.collection(NOTES_COLLECTION).getList(1, 50, { sort: '-created' });
-        const items = res?.items || [];
-        
-        // Add flag for notes shared WITH current user
-        for (const note of items) {
-          if (note.shared && note.shared_with) {
-            const sharedWithNames = Array.isArray(note.shared_with) 
-              ? note.shared_with 
-              : (typeof note.shared_with === 'string' ? note.shared_with.split(',').map(n => n.trim()) : []);
-            
-            // Check if current user is in shared_with
-            let currentUserIsRecipient = false;
-            for (const sharedName of sharedWithNames) {
-              const firstName = sharedName.split(' ')[0];
-              try {
-                const records = await pb.collection('Associations').getList(1, 50, {
-                  filter: `first_name = "${firstName}"`,
-                });
-                if (records.items.find(r => r.emailtext === userEmailCache)) {
-                  currentUserIsRecipient = true;
-                  break;
-                }
-              } catch (e) {
-                console.error('Error checking shared_with match:', e);
-              }
-            }
-            note._sharedWithMe = currentUserIsRecipient;
-          }
-        }
-
-        // Fetch all attachments per note so we can display accurate indicators
-        const attachmentsByNote = {};
-        await Promise.all(items.map(async (n) => {
-          try {
-            const atts = await pb.collection(ATTACHMENTS_COLLECTION).getFullList({
-              sort: '-created',
-              filter: `${ATTACHMENTS_PBID_FIELD} = "${n.id}"`,
-              batch: 50,
-            });
-            attachmentsByNote[n.id] = atts || [];
-          } catch {
-            attachmentsByNote[n.id] = [];
-          }
-        }));
-
-        notesCache = {};
-        notesList = items.map((n) => ({
-          ...n,
-          _attachments: attachmentsByNote[n.id] || [],
-          _hasAttachment: (attachmentsByNote[n.id] || []).length > 0,
-        }));
-        notesList.forEach((n) => { notesCache[n.id] = n; });
-        applySearch();
-        status.textContent = '';
-      } catch (e) {
-        console.error('Failed to load notes:', e);
-        status.textContent = `Error loading notes: ${e.message}`;
-      }
-    }
-
-    function applySearch() {
-      const q = (searchQuery || '').toLowerCase();
-      // Filter out hidden notes from the main list
-      let visibleNotes = notesList.filter(n => !n.hidden);
-      
-      // Apply type/category filter
-      switch (currentFilter) {
-        case 'myshared':
-          visibleNotes = visibleNotes.filter(n => n.shared);
-          break;
-        case 'sharedwithme':
-          visibleNotes = visibleNotes.filter(n => n._sharedWithMe);
-          break;
-        case 'job':
-          visibleNotes = visibleNotes.filter(n => n.type === 'job');
-          break;
-        case 'manager':
-          visibleNotes = visibleNotes.filter(n => n.type === 'manager');
-          break;
-        case 'personal':
-          visibleNotes = visibleNotes.filter(n => n.type === 'personal');
-          break;
-        // 'all' - no additional filter
-      }
-      
-      if (!q) {
-        renderNotesList(visibleNotes);
-        return;
-      }
-      const filtered = visibleNotes.filter((n) => {
-        const hay = [
-          n.title,
-          n[NOTE_BODY_PLAIN_FIELD],
-          n[NOTE_BODY_HTML_FIELD] ? htmlToPlainText(n[NOTE_BODY_HTML_FIELD]) : '',
-          n.Job_Number,
-          n.type,
-        ].join(' ').toLowerCase();
-        return hay.includes(q);
-      });
-      renderNotesList(filtered);
-    }
-
-    async function openNoteDetail(note) {
-      if (!note) return;
-      document.getElementById('notesListContainer').classList.add('hidden');
-      document.getElementById('noteContainer').classList.add('hidden');
-      const detailContainer = document.getElementById('noteDetailContainer');
-      detailContainer.classList.remove('hidden');
-
-      // Set background color based on note type and sharing status
-      const type = (note.type || 'personal').toLowerCase();
-      let bgClass;
-      if (note._sharedWithMe) {
-        bgClass = 'bg-blue-100 border-blue-300';
-      } else if (note.shared) {
-        bgClass = 'bg-green-100 border-green-300';
-      } else {
-        const bgMap = {
-          personal: 'bg-amber-100 border-amber-300',
-          manager: 'bg-orange-200 border-orange-400',
-          job: 'bg-pink-200 border-pink-400',
-        };
-        bgClass = bgMap[type] || 'bg-gray-100 border-gray-300';
-      }
-      
-      // Remove all bg- and border- classes and add new ones
-      detailContainer.className = detailContainer.className
-        .replace(/\bbg-\S+\b/g, '')
-        .replace(/\bborder-\S+\b/g, '');
-      detailContainer.classList.add(...bgClass.split(' '));
-
-      document.getElementById('noteDetailTitle').textContent = note.title || 'Untitled';
-      document.getElementById('noteDetailMeta').textContent = note.created ? `Created ${new Date(note.created).toLocaleString()}` : '';
-      const body = note[NOTE_BODY_PLAIN_FIELD] || (note[NOTE_BODY_HTML_FIELD] ? htmlToPlainText(note[NOTE_BODY_HTML_FIELD]) : '');
-      document.getElementById('noteDetailBodyDisplay').textContent = body || '(empty)';
-      
-      // Store current note for editing
-      window.currentEditingNote = note;
-
-      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).getFullList({
-          sort: '-created',
-          filter: `${ATTACHMENTS_PBID_FIELD} = "${note.id}"`,
-          batch: 200,
-        });
-
-        const audioMatch = findFirstAttachmentByKind(atts, 'audio');
-        if (audioMatch) {
-          audioEl.src = audioMatch.url;
-          audioEl.classList.remove('hidden');
-          audioStatus.textContent = '';
-          document.getElementById('noteDetailAudioLabel').classList.remove('hidden');
-        } else {
-          document.getElementById('noteDetailAudioLabel').classList.add('hidden');
-          audioStatus.textContent = '';
-        }
-
-        if (!atts.length) {
-          document.getElementById('noteDetailAttachmentsLabel').classList.add('hidden');
-          attachmentsStatusEl.textContent = '';
-        } else {
-          document.getElementById('noteDetailAttachmentsLabel').classList.remove('hidden');
-          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];
-      if (note) openNoteDetail(note);
-    });
-
-    document.getElementById('newNoteBtn').addEventListener('click', () => {
-      resetNoteForm();
-      showNoteForm();
-    });
-
-    document.getElementById('refreshNotesBtn').addEventListener('click', () => {
-      loadNotesList();
-    });
-
-    // Filter button listeners
-    document.getElementById('filterAllBtn').addEventListener('click', () => {
-      currentFilter = 'all';
-      searchQuery = '';
-      document.getElementById('notesSearch').value = '';
-      applySearch();
-    });
-
-    document.getElementById('filterMySharedBtn').addEventListener('click', () => {
-      currentFilter = 'myshared';
-      searchQuery = '';
-      document.getElementById('notesSearch').value = '';
-      applySearch();
-    });
-
-    document.getElementById('filterSharedWithMeBtn').addEventListener('click', () => {
-      currentFilter = 'sharedwithme';
-      searchQuery = '';
-      document.getElementById('notesSearch').value = '';
-      applySearch();
-    });
-
-    document.getElementById('filterJobBtn').addEventListener('click', () => {
-      currentFilter = 'job';
-      searchQuery = '';
-      document.getElementById('notesSearch').value = '';
-      applySearch();
-    });
-
-    document.getElementById('filterManagerBtn').addEventListener('click', () => {
-      currentFilter = 'manager';
-      searchQuery = '';
-      document.getElementById('notesSearch').value = '';
-      applySearch();
-    });
-
-    document.getElementById('filterPersonalBtn').addEventListener('click', () => {
-      currentFilter = 'personal';
-      searchQuery = '';
-      document.getElementById('notesSearch').value = '';
-      applySearch();
-    });
-
-    document.getElementById('hiddenNotesBtn').addEventListener('click', () => {
-      showHiddenNotes();
-    });
-
-    document.getElementById('backToNotesFromHiddenBtn').addEventListener('click', () => {
-      showNotesList();
-    });
-
-    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();
-    });
-
-    document.getElementById('detailBackBtn').addEventListener('click', () => {
-      showNotesList();
-    });
-
-    document.getElementById('detailNewNoteBtn').addEventListener('click', () => {
-      resetNoteForm();
-      showNoteForm();
-    });
-
-    // Title edit listeners
-    document.getElementById('noteDetailTitle').addEventListener('dblclick', () => {
-      const titleEl = document.getElementById('noteDetailTitle');
-      const titleEdit = document.getElementById('noteDetailTitleEdit');
-      const titleInput = document.getElementById('noteDetailTitleInput');
-      titleInput.value = titleEl.textContent;
-      titleEl.classList.add('hidden');
-      titleEdit.classList.remove('hidden');
-      titleInput.focus();
-      titleInput.select();
-    });
-
-    document.getElementById('noteDetailTitleSave').addEventListener('click', async () => {
-      const titleInput = document.getElementById('noteDetailTitleInput').value.trim();
-      if (window.currentEditingNote) {
-        try {
-          await pb.collection(NOTES_COLLECTION).update(window.currentEditingNote.id, { title: titleInput });
-          window.currentEditingNote.title = titleInput;
-          document.getElementById('noteDetailTitle').textContent = titleInput || 'Untitled';
-          document.getElementById('noteDetailTitleEdit').classList.add('hidden');
-          document.getElementById('noteDetailTitle').classList.remove('hidden');
-          loadNotesList();
-        } catch (err) {
-          console.error('Error updating title:', err);
-        }
-      }
-    });
-
-    document.getElementById('noteDetailTitleCancel').addEventListener('click', () => {
-      document.getElementById('noteDetailTitleEdit').classList.add('hidden');
-      document.getElementById('noteDetailTitle').classList.remove('hidden');
-    });
-
-    // Body edit listeners
-    document.getElementById('noteDetailBodyDisplay').addEventListener('dblclick', () => {
-      const bodyDisplay = document.getElementById('noteDetailBodyDisplay');
-      const bodyEdit = document.getElementById('noteDetailBodyEdit');
-      const bodyInput = document.getElementById('noteDetailBodyInput');
-      bodyInput.value = bodyDisplay.textContent;
-      bodyDisplay.classList.add('hidden');
-      bodyEdit.classList.remove('hidden');
-      bodyInput.focus();
-    });
-
-    document.getElementById('noteDetailBodySave').addEventListener('click', async () => {
-      const bodyInput = document.getElementById('noteDetailBodyInput').value;
-      if (window.currentEditingNote) {
-        try {
-          const payload = {
-            [NOTE_BODY_PLAIN_FIELD]: bodyInput,
-            [NOTE_BODY_HTML_FIELD]: plainTextToHTML(bodyInput),
-          };
-          await pb.collection(NOTES_COLLECTION).update(window.currentEditingNote.id, payload);
-          window.currentEditingNote[NOTE_BODY_PLAIN_FIELD] = bodyInput;
-          document.getElementById('noteDetailBodyDisplay').textContent = bodyInput || '(empty)';
-          document.getElementById('noteDetailBodyEdit').classList.add('hidden');
-          document.getElementById('noteDetailBodyDisplay').classList.remove('hidden');
-          loadNotesList();
-        } catch (err) {
-          console.error('Error updating body:', err);
-        }
-      }
-    });
-
-    document.getElementById('noteDetailBodyCancel').addEventListener('click', () => {
-      document.getElementById('noteDetailBodyEdit').classList.add('hidden');
-      document.getElementById('noteDetailBodyDisplay').classList.remove('hidden');
-    });
-
-    // Delete button listener
-    document.getElementById('noteDetailDeleteBtn').addEventListener('click', async () => {
-      if (!window.currentEditingNote) return;
-      const confirmed = confirm('Are you sure you want to delete this note? This action cannot be undone.');
-      if (!confirmed) return;
-      
-      try {
-        await pb.collection(NOTES_COLLECTION).update(window.currentEditingNote.id, { delete: true });
-        showNotesList();
-        loadNotesList();
-      } catch (err) {
-        console.error('Error deleting note:', err);
-        alert('Failed to delete note: ' + err.message);
-      }
-    });
-
-    // Attachment menu handling
-    const attachmentMenuBtn = document.getElementById('attachmentMenuBtn');
-    const attachmentMenu = document.getElementById('attachmentMenu');
-    const imageInput = document.getElementById('imageInput');
-    const imageCameraInput = document.getElementById('imageCameraInput');
-    const videoInput = document.getElementById('videoInput');
-    const videoCameraInput = document.getElementById('videoCameraInput');
-    const fileInput = document.getElementById('fileInput');
-
-    // Detect mobile vs desktop and show/hide appropriate buttons
-    const isMobileDevice = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-    const setupDeviceSpecificUI = () => {
-      if (isMobileDevice()) {
-        document.querySelectorAll('.desktop-only').forEach(el => el.classList.add('hidden'));
-        document.querySelectorAll('.mobile-only').forEach(el => el.classList.remove('hidden'));
-      } else {
-        document.querySelectorAll('.mobile-only').forEach(el => el.classList.add('hidden'));
-        document.querySelectorAll('.desktop-only').forEach(el => el.classList.remove('hidden'));
-      }
-    };
-    setupDeviceSpecificUI();
-
-    attachmentMenuBtn.addEventListener('click', (e) => {
-      e.preventDefault();
-      attachmentMenu.classList.toggle('hidden');
-    });
-
-    const imageSubmenu = document.getElementById('imageSubmenu');
-    const videoSubmenu = document.getElementById('videoSubmenu');
-
-    document.getElementById('attachImageBtn').addEventListener('click', () => {
-      imageSubmenu.classList.toggle('hidden');
-      videoSubmenu.classList.add('hidden');
-    });
-
-    document.getElementById('takePhotoBtn').addEventListener('click', () => {
-      attachmentMenu.classList.add('hidden');
-      imageSubmenu.classList.add('hidden');
-      imageCameraInput.click();
-    });
-
-    document.getElementById('selectImageBtn').addEventListener('click', () => {
-      attachmentMenu.classList.add('hidden');
-      imageSubmenu.classList.add('hidden');
-      imageInput.click();
-    });
-
-    document.getElementById('attachVideoBtn').addEventListener('click', () => {
-      videoSubmenu.classList.toggle('hidden');
-      imageSubmenu.classList.add('hidden');
-    });
-
-    document.getElementById('recordVideoBtn').addEventListener('click', () => {
-      attachmentMenu.classList.add('hidden');
-      videoSubmenu.classList.add('hidden');
-      videoCameraInput.click();
-    });
-
-    document.getElementById('selectVideoBtn').addEventListener('click', () => {
-      attachmentMenu.classList.add('hidden');
-      videoSubmenu.classList.add('hidden');
-      videoInput.click();
-    });
-
-    document.getElementById('attachFileBtn').addEventListener('click', () => {
-      attachmentMenu.classList.add('hidden');
-      imageSubmenu.classList.add('hidden');
-      videoSubmenu.classList.add('hidden');
-      fileInput.click();
-    });
-
-    // File input change handlers
-    [imageInput, imageCameraInput, videoInput, videoCameraInput, fileInput].forEach(input => {
-      input.addEventListener('change', (e) => {
-        pendingNoteAttachments.push(...Array.from(e.target.files || []));
-        renderNoteAttachmentsList();
-      });
-    });
-
-    document.getElementById('clearAttachmentsBtn').addEventListener('click', (e) => {
-      e.preventDefault();
-      pendingNoteAttachments = [];
-      imageInput.value = '';
-      imageCameraInput.value = '';
-      videoInput.value = '';
-      videoCameraInput.value = '';
-      fileInput.value = '';
-      renderNoteAttachmentsList();
-    });
-
-    // Snip handler (partial screenshot)
-    document.getElementById('takeSnipBtn')?.addEventListener('click', async () => {
-      try {
-        attachmentMenu.classList.add('hidden');
-        imageSubmenu.classList.add('hidden');
-        const canvas = await window.captureSnip();
-        if (canvas) {
-          const file = await window.canvasToFile(canvas);
-          pendingNoteAttachments.push(file);
-          renderNoteAttachmentsList();
-        }
-      } catch (error) {
-        console.error('Snip failed:', error);
-      }
-    });
-
-    // Screen recording handler
-    document.getElementById('recordScreenBtn')?.addEventListener('click', async () => {
-      try {
-        attachmentMenu.classList.add('hidden');
-        videoSubmenu.classList.add('hidden');
-        
-        const recorder = await window.recordScreen();
-        if (recorder) {
-          // Create stop button overlay
-          const stopOverlay = document.createElement('div');
-          stopOverlay.style.cssText = `position:fixed;top:20px;right:20px;z-index:50000;background:white;padding:15px 20px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);`;
-          
-          const stopBtn = document.createElement('button');
-          stopBtn.textContent = '⏹ Stop Recording';
-          stopBtn.style.cssText = `padding:10px 20px;background:#EF4444;color:white;border:none;border-radius:6px;font-size:14px;font-weight:bold;cursor:pointer;`;
-          
-          stopBtn.addEventListener('click', async () => {
-            const file = await recorder.stop();
-            if (file) {
-              pendingNoteAttachments.push(file);
-              renderNoteAttachmentsList();
-            }
-            stopOverlay.remove();
-          });
-          
-          stopOverlay.appendChild(stopBtn);
-          document.body.appendChild(stopOverlay);
-          
-          // Auto-stop after 5 minutes as fallback
-          setTimeout(async () => {
-            if (recorder.isRecording()) {
-              const file = await recorder.stop();
-              if (file) {
-                pendingNoteAttachments.push(file);
-                renderNoteAttachmentsList();
-              }
-              stopOverlay.remove();
-            }
-          }, 5 * 60 * 1000);
-        }
-      } catch (error) {
-        console.error('Screen recording failed:', error);
-      }
-    });
-
-    // Close menu on outside click
-    document.addEventListener('click', (e) => {
-      if (!attachmentMenuBtn.contains(e.target) && !attachmentMenu.contains(e.target)) {
-        attachmentMenu.classList.add('hidden');
-        imageSubmenu.classList.add('hidden');
-        videoSubmenu.classList.add('hidden');
-      }
-    });
-
-    // Conversation attachment menu setup
-    const conversationAttachmentMenuBtn = document.getElementById('conversationAttachmentMenuBtn');
-    const conversationAttachmentMenu = document.getElementById('conversationAttachmentMenu');
-    const conversationImageInput = document.getElementById('conversationImageInput');
-    const conversationImageCameraInput = document.getElementById('conversationImageCameraInput');
-    const conversationVideoInput = document.getElementById('conversationVideoInput');
-    const conversationVideoCameraInput = document.getElementById('conversationVideoCameraInput');
-    const conversationFileInput = document.getElementById('conversationFileInput');
-
-    conversationAttachmentMenuBtn.addEventListener('click', (e) => {
-      e.preventDefault();
-      conversationAttachmentMenu.classList.toggle('hidden');
-    });
-
-    const conversationImageSubmenu = document.getElementById('conversationImageSubmenu');
-    const conversationVideoSubmenu = document.getElementById('conversationVideoSubmenu');
-
-    document.getElementById('conversationAttachImageBtn').addEventListener('click', () => {
-      conversationImageSubmenu.classList.toggle('hidden');
-      conversationVideoSubmenu.classList.add('hidden');
-    });
-
-    document.getElementById('conversationTakePhotoBtn').addEventListener('click', () => {
-      conversationAttachmentMenu.classList.add('hidden');
-      conversationImageSubmenu.classList.add('hidden');
-      conversationImageCameraInput.click();
-    });
-
-    document.getElementById('conversationSelectImageBtn').addEventListener('click', () => {
-      conversationAttachmentMenu.classList.add('hidden');
-      conversationImageSubmenu.classList.add('hidden');
-      conversationImageInput.click();
-    });
-
-    document.getElementById('conversationAttachVideoBtn').addEventListener('click', () => {
-      conversationVideoSubmenu.classList.toggle('hidden');
-      conversationImageSubmenu.classList.add('hidden');
-    });
-
-    document.getElementById('conversationRecordVideoBtn').addEventListener('click', () => {
-      conversationAttachmentMenu.classList.add('hidden');
-      conversationVideoSubmenu.classList.add('hidden');
-      conversationVideoCameraInput.click();
-    });
-
-    document.getElementById('conversationSelectVideoBtn').addEventListener('click', () => {
-      conversationAttachmentMenu.classList.add('hidden');
-      conversationVideoSubmenu.classList.add('hidden');
-      conversationVideoInput.click();
-    });
-
-    document.getElementById('conversationAttachFileBtn').addEventListener('click', () => {
-      conversationAttachmentMenu.classList.add('hidden');
-      conversationImageSubmenu.classList.add('hidden');
-      conversationVideoSubmenu.classList.add('hidden');
-      conversationFileInput.click();
-    });
-
-    // File input change handlers for conversation
-    [conversationImageInput, conversationImageCameraInput, conversationVideoInput, conversationVideoCameraInput, conversationFileInput].forEach(input => {
-      input.addEventListener('change', (e) => {
-        pendingConversationAttachments.push(...Array.from(e.target.files || []));
-        renderConversationAttachmentsList();
-      });
-    });
-
-    document.getElementById('conversationClearAttachmentsBtn').addEventListener('click', (e) => {
-      e.preventDefault();
-      pendingConversationAttachments = [];
-      conversationImageInput.value = '';
-      conversationImageCameraInput.value = '';
-      conversationVideoInput.value = '';
-      conversationVideoCameraInput.value = '';
-      conversationFileInput.value = '';
-      renderConversationAttachmentsList();
-    });
-
-    // Snip handler for conversation (partial screenshot)
-    document.getElementById('conversationTakeSnipBtn')?.addEventListener('click', async () => {
-      try {
-        conversationAttachmentMenu.classList.add('hidden');
-        conversationImageSubmenu.classList.add('hidden');
-        const canvas = await window.captureSnip();
-        if (canvas) {
-          const file = await window.canvasToFile(canvas);
-          pendingConversationAttachments.push(file);
-          renderConversationAttachmentsList();
-        }
-      } catch (error) {
-        console.error('Snip failed:', error);
-      }
-    });
-
-    // Screen recording handler for conversation
-    document.getElementById('conversationRecordScreenBtn')?.addEventListener('click', async () => {
-      try {
-        conversationAttachmentMenu.classList.add('hidden');
-        conversationVideoSubmenu.classList.add('hidden');
-        
-        const recorder = await window.recordScreen();
-        if (recorder) {
-          // Create stop button overlay
-          const stopOverlay = document.createElement('div');
-          stopOverlay.style.cssText = `position:fixed;top:20px;right:20px;z-index:50000;background:white;padding:15px 20px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);`;
-          
-          const stopBtn = document.createElement('button');
-          stopBtn.textContent = '⏹ Stop Recording';
-          stopBtn.style.cssText = `padding:10px 20px;background:#EF4444;color:white;border:none;border-radius:6px;font-size:14px;font-weight:bold;cursor:pointer;`;
-          
-          stopBtn.addEventListener('click', async () => {
-            const file = await recorder.stop();
-            if (file) {
-              pendingConversationAttachments.push(file);
-              renderConversationAttachmentsList();
-            }
-            stopOverlay.remove();
-          });
-          
-          stopOverlay.appendChild(stopBtn);
-          document.body.appendChild(stopOverlay);
-          
-          // Auto-stop after 5 minutes as fallback
-          setTimeout(async () => {
-            if (recorder.isRecording()) {
-              const file = await recorder.stop();
-              if (file) {
-                pendingConversationAttachments.push(file);
-                renderConversationAttachmentsList();
-              }
-              stopOverlay.remove();
-            }
-          }, 5 * 60 * 1000);
-        }
-      } catch (error) {
-        console.error('Screen recording failed:', error);
-      }
-    });
-
-    // Close conversation menu on outside click
-    document.addEventListener('click', (e) => {
-      if (!conversationAttachmentMenuBtn.contains(e.target) && !conversationAttachmentMenu.contains(e.target)) {
-        conversationAttachmentMenu.classList.add('hidden');
-        conversationImageSubmenu.classList.add('hidden');
-        conversationVideoSubmenu.classList.add('hidden');
-      }
-    });
-
-    // Search input + voice
-    const notesSearchInput = document.getElementById('notesSearch');
-    const searchVoiceBtn = document.getElementById('searchVoiceBtn');
-
-    function startSearchVoice() {
-      // If already recognizing, stop it instead (toggle behavior)
-      if (isSearchRecognizing) {
-        stopSearchVoice();
-        return;
-      }
-
-      if (!searchRecognition) {
-        const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
-        if (!SR) {
-          console.warn('Web Speech API not supported');
-          return;
-        }
-        searchRecognition = new SR();
-        searchRecognition.continuous = true;
-        searchRecognition.interimResults = true;
-        searchRecognition.lang = 'en-US';
-
-        searchRecognition.onresult = (event) => {
-          let finalTranscript = '';
-          let interimTranscript = '';
-          
-          for (let i = event.results.length - 1; i >= 0; i--) {
-            const transcript = event.results[i][0].transcript;
-            if (event.results[i].isFinal) {
-              finalTranscript += transcript + ' ';
-            } else {
-              interimTranscript += transcript;
-            }
-          }
-          
-          // Update with interim results for real-time feedback
-          const displayText = (finalTranscript + interimTranscript).trim();
-          if (displayText) {
-            notesSearchInput.value = displayText;
-            console.log('Voice search input:', displayText);
-          }
-          
-          // Apply search when we have final results
-          if (finalTranscript.trim()) {
-            const finalText = finalTranscript.trim();
-            searchQuery = finalText;
-            console.log('Voice search final query:', searchQuery);
-            applySearch();
-          }
-          
-          // auto-stop after 2s of silence
-          clearTimeout(searchSilenceTimer);
-          searchSilenceTimer = setTimeout(() => {
-            stopSearchVoice();
-          }, 2000);
-        };
-
-        searchRecognition.onend = () => {
-          isSearchRecognizing = false;
-          searchVoiceBtn.classList.remove('text-red-600');
-          searchVoiceBtn.classList.add('text-purple-600');
-        };
-
-        searchRecognition.onerror = (event) => {
-          console.error('Speech recognition error:', event.error);
-          stopSearchVoice();
-        };
-      }
-
-      try {
-        clearTimeout(searchSilenceTimer);
-        searchRecognition.start();
-        isSearchRecognizing = true;
-        searchVoiceBtn.classList.add('text-red-600');
-        searchVoiceBtn.classList.remove('text-purple-600');
-      } catch (e) {
-        console.warn('Search voice start error:', e);
-      }
-    }
-
-    function stopSearchVoice() {
-      isSearchRecognizing = false;
-      clearTimeout(searchSilenceTimer);
-      if (searchRecognition) {
-        try { searchRecognition.stop(); } catch {}
-      }
-      searchVoiceBtn.classList.remove('text-red-600');
-      searchVoiceBtn.classList.add('text-purple-600');
-    }
-
-    notesSearchInput.addEventListener('input', (e) => {
-      searchQuery = e.target.value;
-      applySearch();
-    });
-
-    searchVoiceBtn.addEventListener('click', () => {
-      if (isSearchRecognizing) {
-        stopSearchVoice();
-      } else {
-        startSearchVoice();
-      }
-    });
-
-    // --- Share Note Logic ---
-    let selectedUsers = []; // { name }
-    const shareNoteInput = document.getElementById('shareNoteInput');
-    const selectedUsersContainer = document.getElementById('selectedUsersContainer');
-
-    shareNoteInput.addEventListener('input', (e) => {
-      const input = e.target.value;
-      const names = input.split(',')
-        .map(name => name.trim())
-        .filter(name => name.length > 0);
-      
-      selectedUsers = names.map(name => ({
-        name: name,
-        firstName: name.split(' ')[0]
-      }));
-      
-      renderSelectedUsers();
-    });
-
-    function renderSelectedUsers() {
-      selectedUsersContainer.innerHTML = '';
-      selectedUsers.forEach((user, index) => {
-        const capsule = document.createElement('div');
-        capsule.className = 'inline-flex items-center gap-2 px-3 py-1 rounded-full bg-green-100 border border-green-300 text-sm text-gray-800';
-        capsule.innerHTML = `
-          <span>${escapeHtml(user.firstName)}</span>
-          <button type="button" class="text-gray-600 hover:text-gray-800 font-bold" data-remove-user="${index}">×</button>
-        `;
-        const removeBtn = capsule.querySelector('[data-remove-user]');
-        removeBtn.addEventListener('click', (e) => {
-          e.preventDefault();
-          selectedUsers = selectedUsers.filter((_, i) => i !== index);
-          const remaining = selectedUsers.map(u => u.name).join(', ');
-          shareNoteInput.value = remaining;
-          renderSelectedUsers();
-        });
-        selectedUsersContainer.appendChild(capsule);
-      });
-    }
-
-    // --- Submit note ---
-    async function submitNote() {
-      const statusEl = document.getElementById('submitStatus');
-      statusEl.textContent = '';
-      const noteText = document.getElementById('noteText').value.trim();
-      let noteTitle = document.getElementById('noteTitle').value.trim();
-      const jobNoteValue = document.getElementById('jobNote').value;
-      const noteType = document.getElementById('noteType').value;
-      const jobNumber = document.getElementById('jobNumber').value.trim();
-      if (!pb.authStore.isValid) {
-        statusEl.textContent = 'Not authenticated.';
-        return;
-      }
-      if (!noteText) {
-        statusEl.textContent = 'Please enter note text.';
-        return;
-      }
-      if (jobNoteValue === 'yes' && !jobNumber) {
-        statusEl.textContent = 'Job number is required when Job Note is Yes.';
-        return;
-      }
-      
-      // Generate title if empty: "Untitled: first 4 words..."
-      if (!noteTitle) {
-        const words = noteText.split(/\s+/).filter(w => w.length > 0);
-        const firstFour = words.slice(0, 4).join(' ');
-        noteTitle = 'Untitled: ' + (firstFour || 'note');
-        // Add ellipsis if note has more than 4 words
-        if (words.length > 4) {
-          noteTitle += '...';
-        }
-      }
-      
-      // Truncate title if it exceeds 120 characters
-      if (noteTitle.length > 120) {
-        noteTitle = noteTitle.substring(0, 120) + '...';
-      }
-      
-      try {
-        // Create note record with display name, email, and title
-        const payload = {
-          [NOTE_BODY_HTML_FIELD]: plainTextToHTML(noteText),
-          [NOTE_BODY_PLAIN_FIELD]: noteText,
-          [NOTE_USERNAME_FIELD]: displayNameCache,
-          email: userEmailCache,
-          title: noteTitle,
-          job_note: jobNoteValue === 'yes',
-          type: noteType,
-          userId: pb.authStore.model?.id || pb.authStore.record?.id,
-          shared: selectedUsers.length > 0 ? true : false,
-          shared_with: selectedUsers.map(u => u.name),
-        };
-        
-        // Only include job_number if it has a value
-        if (jobNumber) {
-          payload.Job_Number = jobNumber;
-        }
-        
-        const noteRecord = await pb.collection(NOTES_COLLECTION).create(payload);
-        
-        // TEST: Play alert sound only if current user is in shared_with
-        if (selectedUsers.length > 0) {
-          try {
-            console.log(`🔔 Checking if current user (${userEmailCache}) is in shared_with...`);
-            let currentUserIsRecipient = false;
-            
-            for (const user of selectedUsers) {
-              const firstName = user.name.split(' ')[0];
-              const records = await pb.collection('Associations').getList(1, 50, {
-                filter: `first_name = "${firstName}"`,
-              });
-              
-              if (records.items.length > 0) {
-                const match = records.items.find(r => r.emailtext === userEmailCache);
-                if (match) {
-                  currentUserIsRecipient = true;
-                  console.log(`✓ Found match: ${user.name} (${match.emailtext})`);
-                  break;
-                }
-              }
-            }
-            
-            if (currentUserIsRecipient) {
-              console.log('🔔 Current user is a recipient - playing alert sound');
-              const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-              if (audioContext.state === 'suspended') {
-                await audioContext.resume();
-              }
-              
-              const now = audioContext.currentTime;
-              const playBell = (startTime, volume = 1) => {
-                const osc = audioContext.createOscillator();
-                const gain = audioContext.createGain();
-                osc.connect(gain);
-                gain.connect(audioContext.destination);
-                osc.frequency.setValueAtTime(1000, startTime);
-                osc.frequency.exponentialRampToValueAtTime(600, startTime + 0.15);
-                gain.gain.setValueAtTime(0.8 * volume, startTime);
-                gain.gain.exponentialRampToValueAtTime(0.01, startTime + 0.2);
-                osc.start(startTime);
-                osc.stop(startTime + 0.2);
-              };
-              
-              playBell(now, 1);
-              playBell(now + 0.2, 0.7);
-              console.log('✓ Alert sound played');
-            } else {
-              console.log('ℹ Current user is the creator - no alert sound');
-            }
-          } catch (err) {
-            console.error('Error playing alert sound:', err);
-          }
-        }
-        
-        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' });
-            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 filesToUpload = (pendingNoteAttachments && pendingNoteAttachments.length) ? pendingNoteAttachments : [];
-        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 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 = '';
-        await clearAudio();
-        pendingNoteAttachments = [];
-        document.getElementById('imageInput').value = '';
-        document.getElementById('imageCameraInput').value = '';
-        document.getElementById('videoInput').value = '';
-        document.getElementById('videoCameraInput').value = '';
-        document.getElementById('fileInput').value = '';
-        renderNoteAttachmentsList();
-        document.getElementById('noteText').value = '';
-        document.getElementById('noteTitle').value = '';
-        document.getElementById('jobNote').value = 'no';
-        document.getElementById('jobNumber').value = '';
-        document.getElementById('jobNumberContainer').classList.add('hidden');
-        document.getElementById('noteType').value = 'personal';
-        loadNotesList();
-        showNotesList();
-      } catch (e) {
-        console.error('Error creating note:', e);
-        console.error('Full error:', JSON.stringify(e, null, 2));
-        if (e.response) {
-          console.error('Response data:', e.response);
-        }
-        statusEl.textContent = `Error saving: ${e.message}`;
-      }
-    }
-
-    document.getElementById('submitNoteBtn').addEventListener('click', submitNote);
-
+    bind('loginBtn', loginPocketBase);
+    bind('logoutBtn', logoutPocketBase);
+    bind('connectOneNoteBtn', connectOneNoteInteractive);
+    bind('refreshOneNoteTokenBtn', refreshOneNoteToken);
+  bind('submitNoteBtn', submitNoteToPrismNotes);
+    bind('syncOneNoteBtn', syncCurrentNoteToOneNote);
+    bind('resolveSectionsBtn', resolveSiteSections);
+    bind('createProofPageBtn', createProofPage);
+
+    updatePbStatus();
+    updateOneNoteStatus();
+    loadHealth();
+    loadGraphStatus();
+    handleMsalRedirect().catch((error) => writeOutput({ error: error?.message || String(error) }));
   </script>
 </body>
 </html>
diff --git a/package.json b/package.json
index de3a3ed..cacadc2 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "start": "bun run server.ts"
   },
   "dependencies": {
+    "@azure/msal-browser": "^5.6.1",
     "@azure/msal-node": "^2.6.7",
     "@microsoft/microsoft-graph-client": "^3.0.7",
     "dotenv": "^16.4.5",
diff --git a/server.ts b/server.ts
index 09f63e8..ec638d0 100644
--- a/server.ts
+++ b/server.ts
@@ -5,89 +5,289 @@ import { cors } from 'hono/cors';
 import PocketBase from 'pocketbase';
 import { ConfidentialClientApplication } from '@azure/msal-node';
 
-// Load secrets from absolute path (not in project directory)
+// ---------------------------------------------------------------------------
+// Config
+// ---------------------------------------------------------------------------
 config({ path: '/home/admin/secrets/.env' });
 
+// Known OneNote target
+// Section/page IDs must come from the OneNote Graph API (sites/{siteId}/onenote/sections),
+// NOT from SharePoint drive item listings (those are different GUIDs).
+const ONENOTE_TARGET = {
+  siteHost: 'czflex.sharepoint.com',
+  sitePath: '/sites/Team',
+  // Placeholder IDs — will be verified/replaced via GET /api/onenote/site-sections
+  sectionId: '',
+  sectionName: 'Billing Notes',
+  pageId: '',
+  pageTitle: 'Billing Notes By Job',
+  notebookName: 'Billing Notes',
+};
+
+// ---------------------------------------------------------------------------
+// App
+// ---------------------------------------------------------------------------
 const app = new Hono();
 
-// Enable CORS
-app.use('/*', cors({
-  origin: '*',
-  credentials: true,
-}));
+app.use('/*', cors({ origin: '*', credentials: true }));
 
-// PocketBase client
+// ---------------------------------------------------------------------------
+// PocketBase
+// ---------------------------------------------------------------------------
 const pb = new PocketBase(process.env.PB_DB || 'http://127.0.0.1:8090');
 
-// Use user's PocketBase token
-function setUserPocketBaseAuth(token: string) {
-  pb.authStore.save(token, null);
+function setPbToken(token: string) { pb.authStore.save(token, null); }
+function clearPbToken() { pb.authStore.clear(); }
+
+async function validatePbToken(token: string): Promise<void> {
+  setPbToken(token);
+  await pb.collection(process.env.PB_AUTH_COLLECTION || 'Users').authRefresh();
 }
 
-// MSAL config for Graph token (client credentials)
-const msalConfig = {
+// ---------------------------------------------------------------------------
+// Shared helpers
+// ---------------------------------------------------------------------------
+function getBearerToken(header: string | undefined | null): string | null {
+  const m = (header || '').match(/^Bearer\s+(.+)$/i);
+  return m?.[1] || null;
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+// ---------------------------------------------------------------------------
+// MSAL app-only (Graph status check)
+// ---------------------------------------------------------------------------
+const cca = new ConfidentialClientApplication({
   auth: {
     clientId: process.env.CLIENT_ID || '',
     authority: `https://login.microsoftonline.com/${process.env.TENANT_ID}`,
     clientSecret: process.env.CLIENT_SECRET || '',
   },
-};
-const cca = new ConfidentialClientApplication(msalConfig);
+});
 
-// Simple in-memory cache for Graph token
 let graphTokenCache: { token: string; expiresOn: number } | null = null;
 
-async function getGraphToken(): Promise<{ token: string; expiresOn: number }> {
+async function getGraphToken() {
   const now = Date.now();
-  if (graphTokenCache && graphTokenCache.expiresOn - 60000 > now) {
-    return graphTokenCache;
-  }
-  const result = await cca.acquireTokenByClientCredential({
-    scopes: ['https://graph.microsoft.com/.default'],
-  });
-  if (!result || !result.accessToken) {
-    throw new Error('Failed to acquire Graph token');
-  }
-  const expiresOn = result.expiresOn ? new Date(result.expiresOn).getTime() : now + 55 * 60 * 1000;
-  graphTokenCache = { token: result.accessToken, expiresOn };
+  if (graphTokenCache && graphTokenCache.expiresOn - 60_000 > now) return graphTokenCache;
+  const result = await cca.acquireTokenByClientCredential({ scopes: ['https://graph.microsoft.com/.default'] });
+  if (!result?.accessToken) throw new Error('Failed to acquire Graph token');
+  graphTokenCache = {
+    token: result.accessToken,
+    expiresOn: result.expiresOn ? new Date(result.expiresOn).getTime() : now + 55 * 60_000,
+  };
   return graphTokenCache;
 }
 
-// Health check
-app.get('/health', (c) => {
-  return c.json({ ok: true, pbDB: process.env.PB_DB });
+// Site ID cache — resolved once per server lifetime using a delegated token
+let cachedSiteId: string | null = null;
+
+async function resolveSiteId(delegatedToken: string): Promise<string> {
+  if (cachedSiteId) return cachedSiteId;
+  const resp = await fetch(
+    `https://graph.microsoft.com/v1.0/sites/${ONENOTE_TARGET.siteHost}:${ONENOTE_TARGET.sitePath}`,
+    { headers: { Authorization: `Bearer ${delegatedToken}` } },
+  );
+  if (!resp.ok) {
+    const err = await resp.text();
+    throw new Error(`Site ID resolution failed (${resp.status}): ${err}`);
+  }
+  const data = await resp.json();
+  if (!data?.id) throw new Error('Graph did not return a site ID');
+  cachedSiteId = data.id as string;
+  console.log('site_id_resolved', { siteId: cachedSiteId });
+  return cachedSiteId;
+}
+
+// ---------------------------------------------------------------------------
+// Routes
+// ---------------------------------------------------------------------------
+
+app.get('/health', (c) => c.json({ ok: true, pbDB: process.env.PB_DB }));
+
+app.get('/api/auth/msal-config', (c) => {
+  const clientId = process.env.CLIENT_ID || '';
+  const tenantId = process.env.TENANT_ID || '';
+  const redirectUri = process.env.MSAL_REDIRECT_URI || '';
+  if (!clientId || !tenantId) {
+    return c.json({ success: false, message: 'Missing CLIENT_ID or TENANT_ID' }, 500);
+  }
+  return c.json({
+    success: true,
+    clientId,
+    tenantId,
+    authority: `https://login.microsoftonline.com/${tenantId}`,
+    redirectUri,
+  });
 });
 
-// Graph token status (acquires if missing/expired)
 app.get('/api/graph/status', async (c) => {
   try {
-    const tokenInfo = await getGraphToken();
-    return c.json({ active: true, expiresOnISO: new Date(tokenInfo.expiresOn).toISOString() });
+    const t = await getGraphToken();
+    return c.json({ active: true, expiresOnISO: new Date(t.expiresOn).toISOString() });
   } catch (e) {
-    return c.json({ active: false, error: (e as Error)?.message || 'Failed to acquire token' }, 500);
+    return c.json({ active: false, error: (e as Error)?.message }, 500);
   }
 });
 
-// Submit endpoint (example)
+// GET /api/onenote/site-sections
+// Requires: Authorization: Bearer <delegated token>
+// Resolves site ID then lists OneNote sections within that site only (no tenant-wide scan).
+app.get('/api/onenote/site-sections', async (c) => {
+  try {
+    const delegatedToken = getBearerToken(c.req.header('authorization'));
+    if (!delegatedToken) return c.json({ success: false, message: 'Missing delegated token' }, 401);
+    const siteId = await resolveSiteId(delegatedToken);
+    const resp = await fetch(
+      `https://graph.microsoft.com/v1.0/sites/${siteId}/onenote/sections?$top=100&$select=id,displayName`,
+      { headers: { Authorization: `Bearer ${delegatedToken}` } },
+    );
+    const data = await resp.json().catch(() => ({}));
+    if (!resp.ok) return c.json({ success: false, siteId, error: data }, resp.status as any);
+    return c.json({ success: true, siteId, sections: data?.value || [] });
+  } catch (e) {
+    return c.json({ success: false, message: (e as Error)?.message }, 500);
+  }
+});
+
+// ---------------------------------------------------------------------------
+// POST /api/onenote/append
+// Requires: x-pb-token (PocketBase session) + Authorization: Bearer <delegated Graph token>
+// Body: { noteId, title, bodyPlain, noteType?, userEmail?, jobNumber?, sectionId? }
+//
+// Strategy:
+//   1. Resolve site ID via GET /sites/{host}:{path}
+//   2. Try PATCH sites/{siteId}/onenote/pages/{pageId}/content  →  append to known page
+//   3. If that fails, POST sites/{siteId}/onenote/sections/{sectionId}/pages  →  create new page
+// ---------------------------------------------------------------------------
+app.post('/api/onenote/append', async (c) => {
+  try {
+    /* ---- auth ---- */
+    const pbToken = c.req.header('x-pb-token');
+    if (!pbToken) return c.json({ success: false, message: 'Missing x-pb-token' }, 401);
+
+    try {
+      await validatePbToken(pbToken);
+    } catch (e) {
+      return c.json({ success: false, message: 'Invalid PocketBase token' }, 401);
+    }
+
+    const delegatedToken = getBearerToken(c.req.header('authorization'));
+    if (!delegatedToken) return c.json({ success: false, message: 'Missing delegated Graph bearer token' }, 401);
+
+    /* ---- payload ---- */
+    const body = await c.req.json();
+    const noteId = String(body?.noteId || '').trim();
+    const title = String(body?.title || 'Untitled').trim();
+    const bodyPlain = String(body?.bodyPlain || '').trim();
+    const noteType = String(body?.noteType || 'personal').trim();
+    const userEmail = String(body?.userEmail || 'unknown').trim();
+    const jobNumber = String(body?.jobNumber || '').trim();
+
+    if (!noteId) return c.json({ success: false, message: 'Missing noteId' }, 400);
+    if (!bodyPlain) return c.json({ success: false, message: 'Missing bodyPlain' }, 400);
+
+    const ts = new Date().toISOString();
+    const safeBody = escapeHtml(bodyPlain).replace(/\r\n|\r|\n/g, '<br/>');
+    const headerLine = [
+      `<strong>${escapeHtml(title)}</strong>`,
+      `type: ${escapeHtml(noteType)}`,
+      `user: ${escapeHtml(userEmail)}`,
+      jobNumber ? `job: ${escapeHtml(jobNumber)}` : '',
+      `note_id: ${escapeHtml(noteId)}`,
+    ].filter(Boolean).join(' | ');
+
+    const appendHtml = `<div data-prism-notes-note-id="${escapeHtml(noteId)}" data-prism-notes-synced-at="${ts}"><p>${headerLine}</p><p>${safeBody}</p><p>---</p></div>`;
+
+    const pageHtml = [
+      '<!DOCTYPE html>',
+      '<html>',
+      `<head><title>${escapeHtml(title)}</title></head>`,
+      `<body>${appendHtml}</body>`,
+      '</html>',
+    ].join('');
+
+    const sectionId = String(body?.sectionId || ONENOTE_TARGET.sectionId || '').trim();
+    const pageId = String(body?.pageId || ONENOTE_TARGET.pageId || '').trim();
+    if (!sectionId) return c.json({ success: false, message: 'No sectionId — run GET /api/onenote/site-sections first to retrieve valid IDs' }, 400);
+
+    const authHeader = { Authorization: `Bearer ${delegatedToken}` };
+
+    /* ---- resolve site ID ---- */
+    const siteId = await resolveSiteId(delegatedToken);
+    const base = `https://graph.microsoft.com/v1.0/sites/${siteId}/onenote`;
+
+    /* ---- 1: try append to known page (if we have a valid pageId) ---- */
+    if (pageId) {
+      const patchResp = await fetch(
+        `${base}/pages/${pageId}/content`,
+        {
+          method: 'PATCH',
+          headers: { ...authHeader, 'Content-Type': 'application/json' },
+          body: JSON.stringify([{ target: 'body', action: 'append', content: appendHtml }]),
+        },
+      );
+
+      if (patchResp.ok) {
+        console.log('onenote_append_success', { mode: 'patch', noteId, siteId });
+        return c.json({ success: true, mode: 'appended', syncedAt: ts });
+      }
+
+      const patchErr = await patchResp.text();
+      console.warn('onenote_patch_failed', { status: patchResp.status, error: patchErr });
+    }
+
+    /* ---- 2: create new page in known section ---- */
+    const postResp = await fetch(
+      `${base}/sections/${sectionId}/pages`,
+      {
+        method: 'POST',
+        headers: { ...authHeader, 'Content-Type': 'text/html' },
+        body: pageHtml,
+      },
+    );
+
+    if (postResp.ok) {
+      const created = await postResp.json().catch(() => ({}));
+      console.log('onenote_create_success', { mode: 'create', noteId, pageId: created?.id, siteId });
+      return c.json({ success: true, mode: 'created', pageId: created?.id || null, syncedAt: ts });
+    }
+
+    const postErr = await postResp.text();
+    console.error('onenote_create_failed', { status: postResp.status, postErr, siteId, sectionId });
+    return c.json(
+      { success: false, message: `OneNote write failed (create ${postResp.status})`, details: { create: postErr, siteId, sectionId } },
+      502,
+    );
+  } catch (e) {
+    console.error('onenote_append_error', { message: (e as Error)?.message });
+    return c.json({ success: false, message: (e as Error)?.message || 'OneNote append failed' }, 500);
+  } finally {
+    clearPbToken();
+  }
+});
+
+// ---------------------------------------------------------------------------
+// POST /api/submit  —  save a record to PocketBase
+// ---------------------------------------------------------------------------
 app.post('/api/submit', async (c) => {
   try {
     const body = await c.req.json();
-    const pbToken = body.pbToken;
+    if (!body?.pbToken) return c.json({ success: false, message: 'Missing pbToken' }, 401);
 
-    if (!pbToken) {
-      return c.json({ success: false, message: 'Missing pbToken' }, 401);
-    }
-
-    // Validate user token
-    setUserPocketBaseAuth(pbToken);
     try {
-      await pb.collection(process.env.PB_AUTH_COLLECTION || 'Users').authRefresh();
+      await validatePbToken(body.pbToken);
     } catch (e) {
-      console.error('auth_validation_failed', { message: (e as Error)?.message });
       return c.json({ success: false, message: 'Invalid token' }, 401);
     }
 
-    // Store in PocketBase collection (adjust fields as needed)
     const record = await pb
       .collection(process.env.PB_COLLECTION || 'Job_Info_TestEnv')
       .create({
@@ -97,31 +297,36 @@ app.post('/api/submit', async (c) => {
       });
 
     console.log('submission_success', { recordId: record.id });
-    return c.json({ success: true, message: 'Feedback submitted successfully', recordId: record.id });
+    return c.json({ success: true, recordId: record.id });
   } catch (err) {
     console.error('submit_error', { message: (err as Error)?.message });
     return c.json({ success: false, message: 'Internal error' }, 500);
+  } finally {
+    clearPbToken();
   }
 });
 
-// Serve static files (images, css, tools, etc)
+// ---------------------------------------------------------------------------
+// Static assets
+// ---------------------------------------------------------------------------
 app.use('/images/*', serveStatic({ root: new URL('./', import.meta.url).pathname }));
 app.use('/tools/*', serveStatic({ root: new URL('./', import.meta.url).pathname }));
 
-// Serve static index.html
+app.get('/vendor/msal-browser.js', async (c) => {
+  const file = Bun.file(new URL('./node_modules/@azure/msal-browser/lib/msal-browser.min.js', import.meta.url));
+  if (!(await file.exists())) return c.text('MSAL browser bundle not found', 404);
+  c.header('Content-Type', 'application/javascript; charset=utf-8');
+  return c.body(await file.text());
+});
+
 app.get('/', async (c) => {
   const html = await Bun.file(new URL('./index.html', import.meta.url)).text();
   return c.html(html);
 });
 
+// ---------------------------------------------------------------------------
+// Start
+// ---------------------------------------------------------------------------
 const PORT = Number(process.env.PORT || 3030);
-
-// Start Bun server manually to avoid Bun's auto startup banner
-const server = Bun.serve({
-  port: PORT,
-  fetch: app.fetch,
-});
-
-// Custom startup notes
-console.log(`Prism Notes server running at http://localhost:${PORT}`);
-console.log('Prism Notes API ready (health: /health)');
+Bun.serve({ port: PORT, fetch: app.fetch });
+console.log(`Prism Notes running at http://localhost:${PORT}`);
diff --git a/tools/user-email-lookup/index.js b/tools/user-email-lookup/index.js
index a0c62bb..b1736ce 100644
--- a/tools/user-email-lookup/index.js
+++ b/tools/user-email-lookup/index.js
@@ -17,6 +17,25 @@
 
 // Cache for email lookups to minimize queries
 const emailLookupCache = {};
+let associationsCollectionAvailable = true;
+let associationsWarningShown = false;
+
+function getAssociationEmail(record) {
+  return record?.emailtext || record?.email || 'Email not found';
+}
+
+function handleAssociationsError(error) {
+  const statusCode = Number(error?.status || error?.response?.status || 0);
+  if (statusCode === 404) {
+    associationsCollectionAvailable = false;
+    if (!associationsWarningShown) {
+      associationsWarningShown = true;
+      console.warn("'Associations' collection not found. Email hover lookup disabled.");
+    }
+    return;
+  }
+  console.error('Associations lookup failed:', error);
+}
 
 /**
  * Fetch email from Associations collection by first name
@@ -31,6 +50,7 @@ const emailLookupCache = {};
  */
 async function getEmailByFirstName(pb, firstName) {
   if (!firstName) return 'Email not found';
+  if (!associationsCollectionAvailable) return 'Email lookup unavailable';
   
   // Check cache first
   if (emailLookupCache[firstName]) {
@@ -38,36 +58,22 @@ async function getEmailByFirstName(pb, firstName) {
   }
   
   try {
-    // First, get ALL records to inspect structure
-    const allRecords = await pb.collection('Associations').getList(1, 50);
-    console.log(`[Email Lookup] All Associations records:`, allRecords.items);
-    if (allRecords.items.length > 0) {
-      console.log(`[Email Lookup] Sample record fields:`, Object.keys(allRecords.items[0]));
-      console.log(`[Email Lookup] Sample record:`, allRecords.items[0]);
-    }
-    
-    // Now try the filtered query
     const records = await pb.collection('Associations').getList(1, 50, {
       filter: `first_name = "${firstName}"`,
     });
-    
-    console.log(`[Email Lookup] Query: first_name="${firstName}" | Filtered results:`, records.items);
-    
+
     if (records.items.length === 0) {
-      console.log(`[Email Lookup] No records found for: ${firstName}`);
       emailLookupCache[firstName] = 'Email not found';
       return 'Email not found';
     }
     
     // Use first match's emailtext field
     const firstRecord = records.items[0];
-    console.log(`[Email Lookup] First record:`, firstRecord);
-    const email = firstRecord.emailtext || 'Email not found';
+    const email = getAssociationEmail(firstRecord);
     emailLookupCache[firstName] = email;
     return email;
   } catch (error) {
-    console.error(`Failed to lookup email for "${firstName}":`, error);
-    console.error(`Error response:`, error.response?.data);
+    handleAssociationsError(error);
     return 'Error loading email';
   }
 }
@@ -161,6 +167,8 @@ function attachEmailLookupTooltip(pb, capsuleEl) {
  */
 window.clearEmailLookupCache = function() {
   Object.keys(emailLookupCache).forEach(key => delete emailLookupCache[key]);
+  associationsCollectionAvailable = true;
+  associationsWarningShown = false;
   console.log('✓ Email lookup cache cleared');
 };
 
