UI: Add Sticky Notes tab and api

server/src/dashboard.html

@@ -412,7 +412,25 @@
             border-color: #2ecc71;
             background: rgba(46, 204, 113, 0.1);
         }
-        
+
+        /* Sticky Notes */
+        .sticky-note {
+            background-color: #f1c40f;
+            color: #2c3e50;
+            padding: 15px;
+            border-radius: 4px;
+            width: 250px;
+            box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
+            position: relative;
+            font-size: 0.9em;
+            line-height: 1.4;
+        }
+        .sticky-note:hover {
+            transform: scale(1.02);
+            box-shadow: 2px 4px 12px rgba(0,0,0,0.2);
+            transition: all 0.2s ease;
+        }
+
         .activity-panel {
             flex: 1;
             display: flex;
@@ -456,6 +474,7 @@
             <button class="tab-button active" onclick="switchTab('graph-tab', this)">Graph Explorer</button>
             <button class="tab-button" onclick="switchTab('search-tab', this)">Omni-Search</button>
             <button class="tab-button" onclick="switchTab('task-tab', this)">Task Board</button>
+            <button class="tab-button" onclick="switchTab('sticky-tab', this)">Sticky Notes</button>
             <button class="tab-button" onclick="switchTab('activity-tab', this)">Live Activity</button>
         </div>
 
@@ -508,6 +527,13 @@
             </div>
         </div>
 
+        <div id="sticky-tab" class="tab-content">
+            <div class="panel sticky-panel" style="flex:1; display:flex; flex-direction:column;">
+                <h2>Sticky Notes</h2>
+                <div id="sticky-notes-container" style="flex:1; overflow-y:auto; display:flex; flex-wrap:wrap; gap:15px; align-items:flex-start; align-content:flex-start;"></div>
+            </div>
+        </div>
+
         <div id="activity-tab" class="tab-content">
             <div class="panel activity-panel" style="flex:1; display:flex; flex-direction:column;">
                 <div id="activity-feed" style="flex:1;"></div>
@@ -812,9 +838,34 @@
             };
         }
 
+        async function loadStickyNotes() {
+            try {
+                const res = await fetch('/api/sticky');
+                const sticky = await res.json();
+                
+                const container = document.getElementById('sticky-notes-container');
+                container.innerHTML = '';
+                
+                sticky.forEach(note => {
+                    const card = document.createElement('div');
+                    card.className = 'sticky-note';
+                    
+                    const date = new Date(note.timestamp * 1000).toLocaleString();
+                    
+                    card.innerHTML = `<div style="font-size:0.75em; color:#7f8c8d; margin-bottom:8px;">${date}</div>
+                                      <div>${note.content}</div>`;
+                    
+                    container.appendChild(card);
+                });
+            } catch (err) {
+                console.error("Failed to load sticky notes", err);
+            }
+        }
+
         // --- Start ---
         loadGraph();
         loadTasks();
+        loadStickyNotes();
         setupWS();
         
         // Listen to theme toggle changes to update graph font colors
@@ -824,6 +875,7 @@
         setInterval(() => {
             loadGraph();
             loadTasks();
+            loadStickyNotes();
         }, 5000);
     </script>
 </body>