watercooler 0.0.7 → 0.0.9

package/package.json

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

package/public/app.js

@@ -9,7 +9,7 @@ let config = { user: '', mailbox: '', avatar: null };
 let messages = []; // Messages TO user (for main panel)
 let allMessages = []; // All messages involving user (for desk dialogs)
 let recipients = [];
-let avatarStates = {}; // Map of name -> {tool_name, timestamp}
+let statusStates = {}; // Map of name -> {tool_name, timestamp}
 let scene, camera, renderer, controls;
 let agentMeshes = new Map();
 let connectionLines = [];
@@ -980,14 +980,9 @@ function updateVillage() {
     clearConnections();
     
     // Use recipients (from coworkers.db) as the authoritative list of agents
+    // Only show people in the coworker list, not random message senders
     const allAgents = new Set([config.user.toLowerCase(), ...recipients.map(r => r.toLowerCase())]);
     
-    // Also add message participants
-    messages.forEach(m => {
-        allAgents.add(m.sender.toLowerCase());
-        allAgents.add(m.recipient.toLowerCase());
-    });
-    
     // Arrange agents in a circle on the platform
     const agents = Array.from(allAgents);
     const radius = Math.min(20, Math.max(10, agents.length * 3));
@@ -998,8 +993,8 @@ function updateVillage() {
         const z = Math.sin(angle) * radius;
         const position = new THREE.Vector3(x, 0, z);
         
-        const avatarState = avatarStates[agent.toLowerCase()];
-        const toolName = avatarState?.tool_name || null;
+        const statusState = statusStates[agent.toLowerCase()];
+        const toolName = statusState?.tool_name || null;
         
         if (!agentMeshes.has(agent)) {
             const group = createAgentDesk(agent, position, toolName);
@@ -1163,14 +1158,14 @@ async function loadData() {
         recipients = Array.isArray(recipientsData) ? recipientsData : [];
         allMessages = Array.isArray(allMessagesData) ? allMessagesData : [];
         
-        // Load avatar states if avatar DB is configured
-        if (config.avatar) {
+        // Load status states if status DB is configured
+        if (config.status) {
             try {
-                const avatarsRes = await fetch('/api/avatars');
-                avatarStates = await avatarsRes.json();
+                const statusRes = await fetch('/api/status');
+                statusStates = await statusRes.json();
             } catch (err) {
-                console.error('Error loading avatar states:', err);
-                avatarStates = {};
+                console.error('Error loading status states:', err);
+                statusStates = {};
             }
         }
         
@@ -1212,7 +1207,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('');
@@ -1227,15 +1224,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 => {
@@ -1311,25 +1300,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);
@@ -1496,15 +1509,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('');
     }
 }
 
@@ -1527,8 +1532,8 @@ function updateDeskLabels() {
             !m.read
         ).length;
         
-        const avatarState = avatarStates[name.toLowerCase()];
-        const toolName = avatarState?.tool_name || null;
+        const statusState = statusStates[name.toLowerCase()];
+        const toolName = statusState?.tool_name || null;
         
         const sprite = group.children.find(c => c.isSprite);
         if (sprite) {
@@ -1591,6 +1596,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">
         {

package/server.ts

@@ -13,7 +13,7 @@ const args = process.argv.slice(2);
 let user: string | null = null;
 let mailboxPath: string | null = null;
 let coworkerPath: string | null = null;
-let avatarPath: string | null = null;
+let statusPath: string | null = null;
 let port: number = parseInt(process.env.PORT || '3000', 10);
 let host: string = process.env.HOST || '0.0.0.0';
 
@@ -24,8 +24,8 @@ for (let i = 0; i < args.length; i++) {
     mailboxPath = args[++i];
   } else if (args[i] === '--coworkers' || args[i] === '-c') {
     coworkerPath = args[++i];
-  } else if (args[i] === '--avatars' || args[i] === '-a') {
-    avatarPath = args[++i];
+  } else if (args[i] === '--status' || args[i] === '-s') {
+    statusPath = args[++i];
   } else if (args[i] === '--port' || args[i] === '-p') {
     const p = parseInt(args[++i], 10);
     if (!isNaN(p)) port = p;
@@ -35,7 +35,7 @@ for (let i = 0; i < args.length; i++) {
 }
 
 if (!user || !mailboxPath) {
-  console.error('Usage: watercooler --user <name> --mailbox <path> [--coworkers <path>] [--avatars <path>] [--port <number>] [--host <address>]');
+  console.error('Usage: watercooler --user <name> --mailbox <path> [--coworkers <path>] [--status <path>] [--port <number>] [--host <address>]');
   process.exit(1);
 }
 
@@ -44,15 +44,15 @@ console.log(`   Mailbox: ${mailboxPath}`);
 if (coworkerPath) {
   console.log(`   Coworker DB: ${coworkerPath}`);
 }
-if (avatarPath) {
-  console.log(`   Avatar DB: ${avatarPath}`);
+if (statusPath) {
+  console.log(`   Status DB: ${statusPath}`);
 }
 console.log(`   URL: http://${host}:${port}`);
 
 // Databases
 let db: Database.Database | null = null;
 let coworkerDb: Database.Database | null = null;
-let avatarDb: Database.Database | null = null;
+let statusDb: Database.Database | null = null;
 
 try {
   db = new Database(mailboxPath);
@@ -71,12 +71,12 @@ if (coworkerPath) {
   }
 }
 
-if (avatarPath) {
+if (statusPath) {
   try {
-    avatarDb = new Database(avatarPath);
-    console.log('   Avatar DB: connected');
+    statusDb = new Database(statusPath);
+    console.log('   Status DB: connected');
   } catch (err: any) {
-    console.warn('   Avatar DB error:', err.message);
+    console.warn('   Status DB error:', err.message);
   }
 }
 
@@ -247,16 +247,16 @@ app.post('/api/messages/:id/read', (req, res) => {
   }
 });
 
-// API: Get avatar states (latest tool usage per coworker)
-app.get('/api/avatars', (req, res) => {
+// API: Get status states (latest tool usage per coworker)
+app.get('/api/status', (req, res) => {
   try {
-    if (!avatarDb) {
+    if (!statusDb) {
       res.json({});
       return;
     }
     
     // Check if latest_tool_usage table exists
-    const tableCheck = avatarDb.prepare(`
+    const tableCheck = statusDb.prepare(`
       SELECT name FROM sqlite_master 
       WHERE type='table' AND name='latest_tool_usage'
     `).get();
@@ -267,7 +267,7 @@ app.get('/api/avatars', (req, res) => {
     }
     
     // Get latest tool usage per name
-    const stmt = avatarDb.prepare(`
+    const stmt = statusDb.prepare(`
       SELECT name, tool_name, timestamp
       FROM latest_tool_usage
       ORDER BY timestamp DESC
@@ -276,26 +276,26 @@ app.get('/api/avatars', (req, res) => {
     const rows = stmt.all() as Array<{name: string; tool_name: string; timestamp: number}>;
     
     // Build map of name -> latest tool (first occurrence is latest due to ORDER BY)
-    const avatarStates: Record<string, {tool_name: string; timestamp: number}> = {};
+    const statusStates: Record<string, {tool_name: string; timestamp: number}> = {};
     for (const row of rows) {
-      if (!avatarStates[row.name]) {
-        avatarStates[row.name] = {
+      if (!statusStates[row.name]) {
+        statusStates[row.name] = {
           tool_name: row.tool_name,
           timestamp: row.timestamp
         };
       }
     }
     
-    res.json(avatarStates);
+    res.json(statusStates);
   } catch (err: any) {
-    console.error('Error in /api/avatars:', err.message);
+    console.error('Error in /api/status:', err.message);
     res.status(500).json({ error: err.message });
   }
 });
 
 // Config endpoint
 app.get('/api/config', (req, res) => {
-  res.json({ user, mailbox: mailboxPath, coworker: coworkerPath, avatar: avatarPath });
+  res.json({ user, mailbox: mailboxPath, coworker: coworkerPath, status: statusPath });
 });
 
 app.listen(port, host, () => {