watercooler 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watercooler",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A beautiful 3D visualization of your mailbox messages as a village of coworkers",
   "type": "module",
   "main": "server.ts",

package/public/app.js

@@ -245,18 +245,18 @@ function createMessageParticle(fromPos, toPos) {
     animateParticle();
 }
 
-function createConnectionLine(fromPos, toPos, isUnread) {
+function createConnectionLine(fromPos, toPos) {
+    const startPos = new THREE.Vector3(fromPos.x, fromPos.y + 5, fromPos.z);
+    const endPos = new THREE.Vector3(toPos.x, toPos.y + 5, toPos.z);
+    
     const material = new THREE.LineBasicMaterial({
-        color: isUnread ? 0xff6b6b : 0x4CAF50,
-        opacity: isUnread ? 0.8 : 0.3,
+        color: 0xff6b6b,
+        opacity: 0.8,
         transparent: true,
-        linewidth: isUnread ? 3 : 1
+        linewidth: 3
     });
     
-    const points = [
-        new THREE.Vector3(fromPos.x, fromPos.y + 5, fromPos.z),
-        new THREE.Vector3(toPos.x, toPos.y + 5, toPos.z)
-    ];
+    const points = [startPos, endPos];
     
     const geometry = new THREE.BufferGeometry().setFromPoints(points);
     const line = new THREE.Line(geometry, material);
@@ -264,6 +264,29 @@ function createConnectionLine(fromPos, toPos, isUnread) {
     scene.add(line);
     connectionLines.push(line);
     
+    // Add arrowhead for directionality
+    const direction = new THREE.Vector3().subVectors(endPos, startPos).normalize();
+    const arrowPos = endPos.clone().sub(direction.clone().multiplyScalar(5));
+    
+    const arrowGeometry = new THREE.ConeGeometry(0.5, 1.5, 8);
+    const arrowMaterial = new THREE.MeshStandardMaterial({
+        color: 0xff6b6b,
+        emissive: 0xff6b6b,
+        emissiveIntensity: 0.3
+    });
+    const arrowhead = new THREE.Mesh(arrowGeometry, arrowMaterial);
+    
+    arrowhead.position.copy(arrowPos);
+    
+    // Orient arrow to point along the line
+    const up = new THREE.Vector3(0, 1, 0);
+    const quaternion = new THREE.Quaternion();
+    quaternion.setFromUnitVectors(up, direction);
+    arrowhead.setRotationFromQuaternion(quaternion);
+    
+    scene.add(arrowhead);
+    connectionLines.push(arrowhead);
+    
     // Send particle
     setTimeout(() => {
         createMessageParticle(fromPos, toPos);
@@ -307,16 +330,15 @@ function updateVillage() {
         }
     });
     
-    // Create connections based on messages
-    messages.forEach(msg => {
+    // Create connections for unread messages only
+    allMessages.forEach(msg => {
         const fromHouse = agentMeshes.get(msg.sender.toLowerCase());
         const toHouse = agentMeshes.get(msg.recipient.toLowerCase());
         
-        if (fromHouse && toHouse) {
+        if (fromHouse && toHouse && !msg.read) {
             createConnectionLine(
                 fromHouse.position,
-                toHouse.position,
-                !msg.read && msg.recipient.toLowerCase() === config.user.toLowerCase()
+                toHouse.position
             );
         }
     });
@@ -387,7 +409,7 @@ function updateUI() {
     // Update recipient select (send panel) - only from coworkers.db
     const select = document.getElementById('recipient-select');
     const currentVal = select.value;
-    select.innerHTML = '<option value="">To: Select agent...</option>' +
+    select.innerHTML = '<option value="">Coworker...</option>' +
         recipients.sort().map(r => 
             `<option value="${r}" ${r === currentVal ? 'selected' : ''}>${r}</option>`
         ).join('');
@@ -408,7 +430,7 @@ function updateUI() {
                     <span class="message-sender">${msg.sender} → ${msg.recipient}</span>
                     <span class="message-time">${new Date(msg.timestamp).toLocaleString()}</span>
                 </div>
-                <div class="message-text">${msg.message}</div>
+                <div class="message-text">${marked.parse(msg.message)}</div>
             </div>
         `).join('');
         
@@ -434,6 +456,12 @@ function updateUI() {
                 // Mark as read
                 markAsRead(msgId);
                 
+                // Expand send panel if collapsed
+                const sendPanel = document.getElementById('send-panel');
+                if (sendPanel && sendPanel.classList.contains('collapsed')) {
+                    toggleSendPanel();
+                }
+                
                 // Focus the message input for typing
                 const messageInput = document.getElementById('message-input');
                 if (messageInput) {
@@ -621,7 +649,7 @@ function updateHouseDialogContent() {
                     <span class="message-sender">${msg.sender} → ${msg.recipient}</span>
                     <span class="message-time">${new Date(msg.timestamp).toLocaleString()}</span>
                 </div>
-                <div class="message-text">${msg.message}</div>
+                <div class="message-text">${marked.parse(msg.message)}</div>
             </div>
         `).join('');
     }

package/public/index.html

@@ -208,9 +208,8 @@
         .message-card {
             background: rgba(255, 255, 255, 0.1);
             border-radius: 12px;
-            padding: 12px;
+            padding: 12px 12px 12px 20px;
             margin-bottom: 10px;
-            border-left: 3px solid #4CAF50;
             transition: all 0.3s ease;
             cursor: pointer;
         }
@@ -220,7 +219,7 @@
         }
         
         .message-card.unread {
-            border-left-color: #ff6b6b;
+            border-left: 3px solid #ff6b6b;
             background: rgba(255, 107, 107, 0.15);
         }
         
@@ -246,6 +245,65 @@
             color: rgba(255, 255, 255, 0.9);
             font-size: 0.85rem;
             line-height: 1.4;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+        
+        .message-text h1, .message-text h2, .message-text h3 {
+            margin: 8px 0;
+            color: white;
+        }
+        
+        .message-text h1 { font-size: 1.2rem; }
+        .message-text h2 { font-size: 1.1rem; }
+        .message-text h3 { font-size: 1rem; }
+        
+        .message-text strong {
+            color: white;
+            font-weight: 700;
+        }
+        
+        .message-text code {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 0.8rem;
+        }
+        
+        .message-text pre {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 10px;
+            border-radius: 8px;
+            overflow-x: auto;
+            margin: 8px 0;
+        }
+        
+        .message-text pre code {
+            background: transparent;
+            padding: 0;
+        }
+        
+        .message-text hr {
+            border: none;
+            border-top: 1px solid rgba(255, 255, 255, 0.2);
+            margin: 12px 0;
+        }
+        
+        .message-text blockquote {
+            border-left: 3px solid rgba(255, 255, 255, 0.4);
+            margin: 8px 0;
+            padding-left: 12px;
+            color: rgba(255, 255, 255, 0.7);
+        }
+        
+        .message-text ul, .message-text ol {
+            margin: 8px 0;
+            padding-left: 24px;
+        }
+        
+        .message-text li {
+            margin: 4px 0;
         }
         
         /* Toggle Messages Button */
@@ -378,13 +436,12 @@
         .house-dialog-body .message-card {
             background: rgba(255, 255, 255, 0.1);
             border-radius: 12px;
-            padding: 12px;
+            padding: 12px 12px 12px 20px;
             margin-bottom: 10px;
-            border-left: 3px solid #4CAF50;
         }
         
         .house-dialog-body .message-card.unread {
-            border-left-color: #ff6b6b;
+            border-left: 3px solid #ff6b6b;
             background: rgba(255, 107, 107, 0.15);
         }
         
@@ -442,6 +499,8 @@
             display: none;
         }
     </style>
+    <!-- Markdown parser -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 </head>
 <body>
     <div id="canvas-container"></div>

package/server.ts

@@ -92,16 +92,15 @@ app.get('/api/messages/sent', (req, res) => {
   }
 });
 
-// API: Get ALL messages involving the user (for house dialogs)
+// API: Get ALL messages between ALL agents
 app.get('/api/messages/all', (req, res) => {
   try {
     if (!db) throw new Error('Database not connected');
     const stmt = db.prepare(`
       SELECT * FROM messages 
-      WHERE recipient = ? OR sender = ?
       ORDER BY timestamp DESC
     `);
-    res.json(stmt.all(user!.toLowerCase(), user!.toLowerCase()));
+    res.json(stmt.all());
   } catch (err: any) {
     res.status(500).json({ error: err.message });
   }