watercooler 0.0.6 → 0.0.8

package/package.json

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

package/public/app.js

@@ -1,5 +1,8 @@
 import * as THREE from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
 
 // State
 let config = { user: '', mailbox: '', avatar: null };
@@ -36,6 +39,8 @@ let holoSphere = null;
 let holoParticles = null;
 let glowLights = [];
 let floatingParticles = [];
+let composer = null;
+let waterMesh = null;
 
 // Initialize Three.js
 function init() {
@@ -99,9 +104,27 @@ function init() {
     const hemiLight = new THREE.HemisphereLight(0x4fd1c5, 0x1a3a3a, 0.4);
     scene.add(hemiLight);
     
+    // Additional accent lights for bloom effect
+    // Center glow from holographic sphere area
+    const centerGlow = new THREE.PointLight(0x4fd1c5, 0.6, 50);
+    centerGlow.position.set(0, PLATFORM_HEIGHT + 15, 0);
+    scene.add(centerGlow);
+    
+    // Edge accent lights
+    const edgeLight1 = new THREE.PointLight(0x88ffdd, 0.4, 30);
+    edgeLight1.position.set(30, PLATFORM_HEIGHT + 10, 30);
+    scene.add(edgeLight1);
+    
+    const edgeLight2 = new THREE.PointLight(0x88ffdd, 0.4, 30);
+    edgeLight2.position.set(-30, PLATFORM_HEIGHT + 10, -30);
+    scene.add(edgeLight2);
+    
     // === Platform ===
     createPlatform();
     
+    // === Reflective Water Surface ===
+    createReflectiveWater();
+    
     // === Glass Walls ===
     createGlassWalls();
     
@@ -117,6 +140,9 @@ function init() {
     // === Floating Particles ===
     createFloatingParticles();
     
+    // === Background Stars ===
+    createBackgroundStars();
+    
     window.addEventListener('resize', onWindowResize);
     
     // Raycaster for desk clicks
@@ -136,6 +162,9 @@ function init() {
         setTimeout(onWindowResize, 100);
     });
     
+    // === Post Processing ===
+    setupPostProcessing();
+    
     animate();
 }
 
@@ -198,6 +227,56 @@ function createPlatform() {
     scene.add(ground);
 }
 
+function createReflectiveWater() {
+    // Reflective water surface below the platform
+    const waterSize = PLATFORM_SIZE * 1.5;
+    const waterGeo = new THREE.PlaneGeometry(waterSize, waterSize, 64, 64);
+    
+    // Create a custom shader material for reflective water effect
+    const waterMat = new THREE.MeshPhysicalMaterial({
+        color: 0x0d3333,
+        metalness: 0.9,
+        roughness: 0.1,
+        transparent: true,
+        opacity: 0.85,
+        transmission: 0.3,
+        thickness: 0.5,
+        clearcoat: 1.0,
+        clearcoatRoughness: 0.1,
+        side: THREE.DoubleSide
+    });
+    
+    waterMesh = new THREE.Mesh(waterGeo, waterMat);
+    waterMesh.rotation.x = -Math.PI / 2;
+    waterMesh.position.y = -0.5;
+    waterMesh.receiveShadow = true;
+    scene.add(waterMesh);
+    
+    // Add subtle ripple effect using vertex displacement
+    const positions = waterMesh.geometry.attributes.position;
+    const initialPositions = positions.array.slice();
+    waterMesh.userData.initialPositions = initialPositions;
+    waterMesh.userData.ripplePhase = 0;
+}
+
+function setupPostProcessing() {
+    // Setup EffectComposer for bloom
+    composer = new EffectComposer(renderer);
+    
+    // Add render pass
+    const renderPass = new RenderPass(scene, camera);
+    composer.addPass(renderPass);
+    
+    // Add bloom pass
+    const bloomPass = new UnrealBloomPass(
+        new THREE.Vector2(window.innerWidth, window.innerHeight),
+        0.8,  // strength
+        0.4,  // radius
+        0.75  // threshold
+    );
+    composer.addPass(bloomPass);
+}
+
 function createGlassWalls() {
     const glassMat = new THREE.MeshPhysicalMaterial({
         color: 0x88cccc,
@@ -491,6 +570,48 @@ function createFloatingParticles() {
     floatingParticles.push(particles);
 }
 
+function createBackgroundStars() {
+    // Distant stars/sparkles in the background
+    const starCount = 200;
+    const positions = new Float32Array(starCount * 3);
+    const sizes = new Float32Array(starCount);
+    
+    for (let i = 0; i < starCount; i++) {
+        // Place stars far outside the platform
+        const theta = Math.random() * Math.PI * 2;
+        const phi = Math.acos(2 * Math.random() - 1);
+        const radius = 100 + Math.random() * 150;
+        
+        positions[i * 3] = radius * Math.sin(phi) * Math.cos(theta);
+        positions[i * 3 + 1] = 20 + Math.random() * 100;
+        positions[i * 3 + 2] = radius * Math.sin(phi) * Math.sin(theta);
+        
+        sizes[i] = 0.5 + Math.random() * 1.5;
+    }
+    
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
+    
+    const material = new THREE.PointsMaterial({
+        color: 0xaaddff,
+        size: 1.0,
+        transparent: true,
+        opacity: 0.6,
+        blending: THREE.AdditiveBlending,
+        sizeAttenuation: true
+    });
+    
+    const stars = new THREE.Points(geometry, material);
+    scene.add(stars);
+    
+    // Animate stars with twinkle effect
+    stars.userData.twinklePhase = Math.random() * Math.PI * 2;
+    
+    // Add to floatingParticles for animation
+    floatingParticles.push(stars);
+}
+
 function createAgentDesk(name, position, toolName = null) {
     const color = getAgentColor(name);
     const group = new THREE.Group();
@@ -946,12 +1067,23 @@ function animate() {
     }
     
     // Animate floating particles
-    floatingParticles.forEach(particles => {
+    floatingParticles.forEach((particles, index) => {
         const positions = particles.geometry.attributes.position.array;
-        for (let i = 0; i < positions.length; i += 3) {
-            positions[i + 1] += Math.sin(time + positions[i] * 0.1) * 0.003;
+        
+        if (particles.userData.twinklePhase !== undefined) {
+            // Star twinkling effect
+            const twinkle = Math.sin(time * 2 + particles.userData.twinklePhase) * 0.3 + 0.7;
+            particles.material.opacity = 0.4 + twinkle * 0.4;
+            
+            // Slowly rotate stars
+            particles.rotation.y = time * 0.02;
+        } else {
+            // Regular floating particles
+            for (let i = 0; i < positions.length; i += 3) {
+                positions[i + 1] += Math.sin(time + positions[i] * 0.1) * 0.003;
+            }
+            particles.geometry.attributes.position.needsUpdate = true;
         }
-        particles.geometry.attributes.position.needsUpdate = true;
     });
     
     // Subtle glow pulse on lamps
@@ -960,8 +1092,34 @@ function animate() {
         item.light.intensity = item.baseIntensity * pulse;
     });
     
+    // Animate water ripples
+    if (waterMesh && waterMesh.userData.initialPositions) {
+        const positions = waterMesh.geometry.attributes.position;
+        const initialPositions = waterMesh.userData.initialPositions;
+        
+        for (let i = 0; i < positions.count; i++) {
+            const x = initialPositions[i * 3];
+            const y = initialPositions[i * 3 + 1];
+            
+            // Create gentle ripple effect
+            const distance = Math.sqrt(x * x + y * y);
+            const wave1 = Math.sin(distance * 0.3 - time * 0.8) * 0.15;
+            const wave2 = Math.sin(x * 0.2 + time * 0.5) * 0.1;
+            const wave3 = Math.cos(y * 0.15 + time * 0.3) * 0.08;
+            
+            positions.setZ(i, wave1 + wave2 + wave3);
+        }
+        positions.needsUpdate = true;
+    }
+    
     controls.update();
-    renderer.render(scene, camera);
+    
+    // Use composer for bloom effect if available, otherwise standard renderer
+    if (composer) {
+        composer.render();
+    } else {
+        renderer.render(scene, camera);
+    }
 }
 
 function onWindowResize() {
@@ -971,6 +1129,11 @@ function onWindowResize() {
     camera.updateProjectionMatrix();
     renderer.setSize(width, height);
     
+    // Resize composer for bloom effect
+    if (composer) {
+        composer.setSize(width, height);
+    }
+    
     if (width < 768) {
         camera.position.y = Math.max(camera.position.y, 40);
         camera.position.z = Math.max(camera.position.z, 50);
@@ -1049,7 +1212,9 @@ function updateUI() {
     // Update recipient select (send panel) - only from coworkers.db
     const select = document.getElementById('recipient-select');
     const currentVal = select.value;
+    const everyoneOption = recipients.length > 0 ? '<option value="@everyone" style="font-weight: bold; color: #5EEAD4;">@everyone (broadcast to all)</option>' : '';
     select.innerHTML = '<option value="">Coworker...</option>' +
+        everyoneOption +
         recipients.sort().map(r => 
             `<option value="${r}" ${r === currentVal ? 'selected' : ''}>${r}</option>`
         ).join('');
@@ -1064,15 +1229,7 @@ function updateUI() {
             </div>
         `;
     } else {
-        messagesDiv.innerHTML = messages.slice(0, 20).map(msg => `
-            <div class="message-card ${msg.read ? '' : 'unread'}" data-id="${msg.id}" data-sender="${msg.sender}" data-recipient="${msg.recipient}">
-                <div class="message-header">
-                    <span class="message-sender">${msg.sender} → ${msg.recipient}</span>
-                    <span class="message-time">${new Date(msg.timestamp).toLocaleString()}</span>
-                </div>
-                <div class="message-text">${marked.parse(msg.message)}</div>
-            </div>
-        `).join('');
+        messagesDiv.innerHTML = messages.slice(0, 20).map(msg => renderMessageCard(msg, true)).join('');
         
         // Add click handlers for all messages (clicking marks as read and sets recipient for reply)
         messagesDiv.querySelectorAll('.message-card').forEach(el => {
@@ -1148,25 +1305,49 @@ async function sendMessage() {
     }
     
     try {
-        const response = await fetch('/api/send', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ to, from: config.user, message })
-        });
+        let sendPromises;
         
-        if (response.ok) {
+        if (to === '@everyone') {
+            // Send to all recipients individually
+            sendPromises = recipients.map(recipient => 
+                fetch('/api/send', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ to: recipient, from: config.user, message })
+                })
+            );
+        } else {
+            // Send to single recipient
+            sendPromises = [fetch('/api/send', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ to, from: config.user, message })
+            })];
+        }
+        
+        const responses = await Promise.all(sendPromises);
+        const allSuccessful = responses.every(r => r.ok);
+        
+        if (allSuccessful) {
             // Clear input
             document.getElementById('message-input').value = '';
             
             // Show toast
             const toast = document.getElementById('toast');
+            const toastMsg = document.getElementById('toast-message');
+            if (toastMsg && to === '@everyone') {
+                toastMsg.textContent = `Message broadcast to ${recipients.length} coworkers!`;
+            }
             toast.classList.add('show');
-            setTimeout(() => toast.classList.remove('show'), 3000);
+            setTimeout(() => {
+                toast.classList.remove('show');
+                if (toastMsg) toastMsg.textContent = 'Message sent!';
+            }, 3000);
             
             // Reload data
             loadData();
         } else {
-            alert('Failed to send message');
+            alert('Failed to send message to some recipients');
         }
     } catch (err) {
         console.error('Error sending:', err);
@@ -1333,15 +1514,7 @@ function updateDeskDialogContent() {
             </div>
         `;
     } else {
-        content.innerHTML = filteredMessages.map(msg => `
-            <div class="message-card ${msg.read ? '' : 'unread'}" style="margin-bottom: 12px;">
-                <div class="message-header">
-                    <span class="message-sender">${msg.sender} → ${msg.recipient}</span>
-                    <span class="message-time">${new Date(msg.timestamp).toLocaleString()}</span>
-                </div>
-                <div class="message-text">${marked.parse(msg.message)}</div>
-            </div>
-        `).join('');
+        content.innerHTML = filteredMessages.map(msg => renderMessageCard(msg, true)).join('');
     }
 }
 
@@ -1428,6 +1601,123 @@ function updateDeskLabels() {
     });
 }
 
+// Parse markdown frontmatter from message text
+function parseFrontmatter(text) {
+    const frontmatterRegex = /^---\s*\n([\s\S]*?)\n---\s*\n?/;
+    const match = text.match(frontmatterRegex);
+    
+    if (!match) {
+        return { content: text, frontmatter: null };
+    }
+    
+    const frontmatterText = match[1];
+    const content = text.slice(match[0].length).trim();
+    
+    // Simple YAML-like parsing
+    const frontmatter = {};
+    const lines = frontmatterText.split('\n');
+    
+    for (const line of lines) {
+        const colonIndex = line.indexOf(':');
+        if (colonIndex > 0) {
+            const key = line.slice(0, colonIndex).trim();
+            let value = line.slice(colonIndex + 1).trim();
+            
+            // Handle arrays: choices: ["option1", "option2"]
+            if (value.startsWith('[') && value.endsWith(']')) {
+                try {
+                    value = JSON.parse(value.replace(/'/g, '"'));
+                } catch {
+                    // Fallback: parse as comma-separated
+                    value = value.slice(1, -1).split(',').map(s => s.trim().replace(/^["']|["']$/g, ''));
+                }
+            } else if (value.startsWith('- ')) {
+                // YAML array format with dashes - collect all consecutive dash items
+                // This is handled below by checking the whole frontmatter
+            } else {
+                // Remove quotes if present
+                value = value.replace(/^["']|["']$/g, '');
+            }
+            
+            frontmatter[key] = value;
+        }
+    }
+    
+    // Handle YAML array format: choices:\n  - option1\n  - option2
+    const choicesMatch = frontmatterText.match(/choices:\s*\n((?:\s*-\s*[^\n]+\n?)+)/);
+    if (choicesMatch) {
+        const choicesLines = choicesMatch[1].trim().split('\n');
+        frontmatter.choices = choicesLines
+            .map(line => line.replace(/^\s*-\s*/, '').trim())
+            .filter(line => line)
+            .map(choice => choice.replace(/^["']|["']$/g, ''));
+    }
+    
+    return { content, frontmatter };
+}
+
+// Send a quick response from a choice button
+window.sendQuickResponse = async function(to, message, messageId) {
+    try {
+        const response = await fetch('/api/send', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ to, from: config.user, message })
+        });
+        
+        if (response.ok) {
+            // Mark the original message as read if messageId is provided
+            if (messageId) {
+                await fetch(`/api/messages/${messageId}/read`, { method: 'POST' });
+            }
+            
+            // Show toast
+            const toast = document.getElementById('toast');
+            const toastMsg = document.getElementById('toast-message');
+            if (toastMsg) toastMsg.textContent = 'Quick reply sent!';
+            toast.classList.add('show');
+            setTimeout(() => {
+                toast.classList.remove('show');
+                if (toastMsg) toastMsg.textContent = 'Message sent!';
+            }, 2000);
+            
+            // Reload data
+            loadData();
+        } else {
+            console.error('Failed to send quick response');
+        }
+    } catch (err) {
+        console.error('Error sending quick response:', err);
+    }
+}
+
+// Render a message card HTML with optional choice buttons
+function renderMessageCard(msg, showChoices = true) {
+    const { content, frontmatter } = parseFrontmatter(msg.message);
+    const choices = frontmatter?.choices;
+    const showChoicesButtons = showChoices && Array.isArray(choices) && choices.length > 0;
+    const replyTo = msg.recipient.toLowerCase() === config.user.toLowerCase() ? msg.sender : msg.recipient;
+    
+    return `
+        <div class="message-card ${msg.read ? '' : 'unread'}" data-id="${msg.id}" data-sender="${msg.sender}" data-recipient="${msg.recipient}">
+            <div class="message-header">
+                <span class="message-sender">${msg.sender} → ${msg.recipient}</span>
+                <span class="message-time">${new Date(msg.timestamp).toLocaleString()}</span>
+            </div>
+            <div class="message-text">${marked.parse(content)}</div>
+            ${showChoicesButtons ? `
+                <div class="message-choices">
+                    ${choices.map((choice) => `
+                        <button class="choice-btn" onclick="sendQuickResponse('${replyTo}', '${choice.replace(/'/g, "\\'")}', ${msg.id})">
+                            ${choice}
+                        </button>
+                    `).join('')}
+                </div>
+            ` : ''}
+        </div>
+    `;
+}
+
 // Event listeners
 document.getElementById('send-btn').addEventListener('click', sendMessage);
 

package/public/index.html

@@ -592,6 +592,18 @@
             .empty-state p {
                 font-size: 1rem;
             }
+            
+            /* Choice buttons on mobile */
+            .message-choices {
+                gap: 6px;
+                margin-top: 10px;
+                padding-top: 10px;
+            }
+            
+            .choice-btn {
+                padding: 10px 14px;
+                font-size: 0.9rem;
+            }
         }
         
         /* Extra small screens */
@@ -776,6 +788,49 @@
         .tab-badge[style*="display: none"] {
             display: none;
         }
+        
+        /* Message choice buttons */
+        .message-choices {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-top: 12px;
+            padding-top: 12px;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .choice-btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 20px;
+            padding: 8px 16px;
+            font-size: 0.85rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+        }
+        
+        .choice-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
+            background: linear-gradient(135deg, #7b8ff0 0%, #8b5eb5 100%);
+        }
+        
+        .choice-btn:active {
+            transform: translateY(0);
+            box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
+        }
+        
+        /* Darker variant for unread messages */
+        .message-card.unread .choice-btn {
+            background: linear-gradient(135deg, #4fd1c5 0%, #667eea 100%);
+        }
+        
+        .message-card.unread .choice-btn:hover {
+            background: linear-gradient(135deg, #5ee4d8 0%, #7b8ff0 100%);
+        }
     </style>
     <!-- Markdown parser -->
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
@@ -841,7 +896,7 @@
         </div>
     </div>
     
-    <div class="toast" id="toast">Message sent!</div>
+    <div class="toast" id="toast"><span id="toast-message">Message sent!</span></div>
 
     <script type="importmap">
         {