watercooler 0.0.3 → 0.0.5

package/package.json

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

package/public/app.js

@@ -2,10 +2,11 @@ import * as THREE from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 // State
-let config = { user: '', mailbox: '' };
+let config = { user: '', mailbox: '', avatar: null };
 let messages = []; // Messages TO user (for main panel)
 let allMessages = []; // All messages involving user (for house dialogs)
 let recipients = [];
+let avatarStates = {}; // Map of name -> {tool_name, timestamp}
 let scene, camera, renderer, controls;
 let agentMeshes = new Map();
 let connectionLines = [];
@@ -47,6 +48,13 @@ function init() {
     controls.maxPolarAngle = Math.PI / 2 - 0.1;
     controls.minDistance = 20;
     controls.maxDistance = 80;
+    controls.enableZoom = true;
+    controls.zoomSpeed = 0.8;
+    controls.enablePan = false; // Disable pan on touch for better mobile UX
+    controls.touches = {
+        ONE: THREE.TOUCH.ROTATE,
+        TWO: THREE.TOUCH.DOLLY_PAN
+    };
     
     // Lighting
     const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
@@ -90,6 +98,18 @@ function init() {
     mouse = new THREE.Vector2();
     renderer.domElement.addEventListener('click', onHouseClick);
     
+    // Add touch support for mobile
+    renderer.domElement.addEventListener('touchstart', onHouseTouchStart, { passive: false });
+    renderer.domElement.addEventListener('touchend', onHouseTouchEnd, { passive: false });
+    
+    // Disable context menu on mobile for better UX
+    renderer.domElement.addEventListener('contextmenu', (e) => e.preventDefault());
+    
+    // Handle orientation change
+    window.addEventListener('orientationchange', () => {
+        setTimeout(onWindowResize, 100);
+    });
+    
     animate();
 }
 
@@ -118,7 +138,7 @@ function createTrees() {
     }
 }
 
-function createAgentHouse(name, position) {
+function createAgentHouse(name, position, toolName = null) {
     const color = getAgentColor(name);
     const group = new THREE.Group();
     group.position.copy(position);
@@ -164,30 +184,42 @@ function createAgentHouse(name, position) {
     window2.position.set(1.8, 2.5, 3.1);
     group.add(window2);
     
-    // Name label sprite
+    // Name label sprite (with optional tool name)
     const canvas = document.createElement('canvas');
     const context = canvas.getContext('2d');
     // High DPI canvas for crisp text
     const scale = 2;
     canvas.width = 512;
-    canvas.height = 128;
+    canvas.height = toolName ? 160 : 128; // Taller if showing tool
     context.scale(scale, scale);
+    
+    // Background
     context.fillStyle = 'rgba(0, 0, 0, 0.7)';
-    context.roundRect(0, 0, 256, 64, 16);
+    context.roundRect(0, 0, 256, toolName ? 80 : 64, 16);
     context.fill();
+    
+    // Name text
     context.font = 'bold 24px Arial';
     context.fillStyle = 'white';
     context.textAlign = 'center';
     context.textBaseline = 'middle';
-    context.fillText(name, 128, 32);
+    context.fillText(name, 128, 24);
+    
+    // Tool name text (if available)
+    if (toolName) {
+        context.font = 'italic 16px Arial';
+        context.fillStyle = '#FFD700'; // Gold color for tool name
+        context.fillText(toolName, 128, 56);
+    }
     
     const texture = new THREE.CanvasTexture(canvas);
     texture.minFilter = THREE.LinearFilter;
     texture.magFilter = THREE.LinearFilter;
     const spriteMat = new THREE.SpriteMaterial({ map: texture });
     const sprite = new THREE.Sprite(spriteMat);
-    sprite.position.set(0, 8, 0);
-    sprite.scale.set(8, 2, 1);
+    sprite.position.set(0, toolName ? 8.5 : 8, 0);
+    sprite.scale.set(8, toolName ? 2.5 : 2, 1);
+    sprite.name = 'label'; // Tag for easy updates
     group.add(sprite);
     
     // Path to house
@@ -204,6 +236,49 @@ function createAgentHouse(name, position) {
     return group;
 }
 
+function updateHouseLabel(house, name, toolName = null) {
+    const sprite = house.getObjectByName('label');
+    if (!sprite) return;
+    
+    // Create new canvas with updated text
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    const scale = 2;
+    canvas.width = 512;
+    canvas.height = toolName ? 160 : 128;
+    context.scale(scale, scale);
+    
+    // Background
+    context.fillStyle = 'rgba(0, 0, 0, 0.7)';
+    context.roundRect(0, 0, 256, toolName ? 80 : 64, 16);
+    context.fill();
+    
+    // Name text
+    context.font = 'bold 24px Arial';
+    context.fillStyle = 'white';
+    context.textAlign = 'center';
+    context.textBaseline = 'middle';
+    context.fillText(name, 128, 24);
+    
+    // Tool name text (if available)
+    if (toolName) {
+        context.font = 'italic 16px Arial';
+        context.fillStyle = '#FFD700';
+        context.fillText(toolName, 128, 56);
+    }
+    
+    // Update texture
+    const texture = new THREE.CanvasTexture(canvas);
+    texture.minFilter = THREE.LinearFilter;
+    texture.magFilter = THREE.LinearFilter;
+    sprite.material.map = texture;
+    sprite.material.needsUpdate = true;
+    
+    // Update position and scale
+    sprite.position.set(0, toolName ? 8.5 : 8, 0);
+    sprite.scale.set(8, toolName ? 2.5 : 2, 1);
+}
+
 function createMessageParticle(fromPos, toPos) {
     const particleGeo = new THREE.SphereGeometry(0.3, 8, 8);
     const particleMat = new THREE.MeshStandardMaterial({ 
@@ -321,12 +396,44 @@ function updateVillage() {
         const z = Math.sin(angle) * radius;
         const position = new THREE.Vector3(x, 0, z);
         
+        // Get tool name for this agent from avatar states
+        const avatarState = avatarStates[agent.toLowerCase()];
+        const toolName = avatarState?.tool_name || null;
+        
         if (!agentMeshes.has(agent)) {
-            createAgentHouse(agent, position);
+            createAgentHouse(agent, position, toolName);
         } else {
             // Update position if needed
             const house = agentMeshes.get(agent);
             house.position.copy(position);
+            
+            // Update label with current tool name
+            updateHouseLabel(house, agent, toolName);
+        }
+    });
+    
+    // Remove houses for coworkers that no longer exist
+    agentMeshes.forEach((house, name) => {
+        if (!allAgents.has(name)) {
+            // Remove from scene
+            scene.remove(house);
+            
+            // Dispose of geometries and materials to prevent memory leaks
+            house.traverse((child) => {
+                if (child.isMesh) {
+                    child.geometry.dispose();
+                    if (child.material) {
+                        if (Array.isArray(child.material)) {
+                            child.material.forEach(m => m.dispose());
+                        } else {
+                            child.material.dispose();
+                        }
+                    }
+                }
+            });
+            
+            // Remove from Map
+            agentMeshes.delete(name);
         }
     });
     
@@ -354,9 +461,21 @@ function animate() {
 }
 
 function onWindowResize() {
-    camera.aspect = window.innerWidth / window.innerHeight;
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    camera.aspect = width / height;
     camera.updateProjectionMatrix();
-    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setSize(width, height);
+    
+    // Adjust camera position for better mobile view
+    if (width < 768) {
+        // On mobile, position camera slightly higher and further back
+        camera.position.y = Math.max(camera.position.y, 35);
+        camera.position.z = Math.max(camera.position.z, 45);
+        controls.minDistance = 30; // Prevent zooming too close on mobile
+    } else {
+        controls.minDistance = 20;
+    }
 }
 
 // API and UI Functions
@@ -379,6 +498,17 @@ async function loadData() {
         recipients = Array.isArray(recipientsData) ? recipientsData : [];
         allMessages = Array.isArray(allMessagesData) ? allMessagesData : [];
         
+        // Load avatar states if avatar DB is configured
+        if (config.avatar) {
+            try {
+                const avatarsRes = await fetch('/api/avatars');
+                avatarStates = await avatarsRes.json();
+            } catch (err) {
+                console.error('Error loading avatar states:', err);
+                avatarStates = {};
+            }
+        }
+        
         updateUI();
         updateVillage();
     } catch (err) {
@@ -396,7 +526,10 @@ window.toggleSendPanel = function() {
 
 window.toggleMessagesPanel = function() {
     const panel = document.getElementById('messages-panel');
+    const btn = document.getElementById('toggle-messages-btn');
     panel.classList.toggle('open');
+    btn.style.opacity = panel.classList.contains('open') ? '0' : '1';
+    btn.style.pointerEvents = panel.classList.contains('open') ? 'none' : 'auto';
 };
 
 function updateUI() {
@@ -491,6 +624,18 @@ async function markAsRead(id) {
     }
 }
 
+window.markAllAsRead = async function() {
+    const unreadMessages = messages.filter(m => !m.read && m.recipient.toLowerCase() === config.user.toLowerCase());
+    if (unreadMessages.length === 0) return;
+    
+    try {
+        await Promise.all(unreadMessages.map(m => fetch(`/api/messages/${m.id}/read`, { method: 'POST' })));
+        loadData();
+    } catch (err) {
+        console.error('Error marking all as read:', err);
+    }
+};
+
 async function sendMessage() {
     const to = document.getElementById('recipient-select').value;
     const message = document.getElementById('message-input').value.trim();
@@ -529,9 +674,47 @@ async function sendMessage() {
 
 // House click handler
 function onHouseClick(event) {
-    // Calculate mouse position
-    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+    handleHouseInteraction(event.clientX, event.clientY);
+}
+
+// Touch handlers for mobile
+let touchStartX = 0;
+let touchStartY = 0;
+
+function onHouseTouchStart(event) {
+    if (event.touches.length === 1) {
+        touchStartX = event.touches[0].clientX;
+        touchStartY = event.touches[0].clientY;
+    }
+}
+
+function onHouseTouchEnd(event) {
+    if (event.changedTouches.length === 1) {
+        const touchEndX = event.changedTouches[0].clientX;
+        const touchEndY = event.changedTouches[0].clientY;
+        
+        // Check if touch moved significantly (if so, it's a drag/pan, not a tap)
+        const moveDistance = Math.sqrt(
+            Math.pow(touchEndX - touchStartX, 2) + 
+            Math.pow(touchEndY - touchStartY, 2)
+        );
+        
+        // Only trigger if touch didn't move much (tap vs swipe)
+        if (moveDistance < 20) {
+            handleHouseInteraction(touchEndX, touchEndY);
+        }
+    }
+}
+
+// Common house interaction handler
+function handleHouseInteraction(clientX, clientY) {
+    // Calculate normalized device coordinates
+    const rect = renderer.domElement.getBoundingClientRect();
+    const x = ((clientX - rect.left) / rect.width) * 2 - 1;
+    const y = -((clientY - rect.top) / rect.height) * 2 + 1;
+    
+    mouse.x = x;
+    mouse.y = y;
     
     raycaster.setFromCamera(mouse, camera);
     
@@ -664,7 +847,7 @@ window.closeHouseDialog = function() {
     document.getElementById('house-dialog').classList.remove('active');
 };
 
-// Update house labels to show unread indicators
+// Update house labels to show unread indicators and tool names
 function updateHouseLabels() {
     agentMeshes.forEach((group, name) => {
         // Check for unread messages SENT TO this agent (messages they haven't read)
@@ -681,6 +864,10 @@ function updateHouseLabels() {
             !m.read
         ).length;
         
+        // Get tool name for this agent
+        const avatarState = avatarStates[name.toLowerCase()];
+        const toolName = avatarState?.tool_name || null;
+        
         // Find the sprite label
         const sprite = group.children.find(c => c.isSprite);
         if (sprite) {
@@ -689,7 +876,7 @@ function updateHouseLabels() {
             const context = canvas.getContext('2d');
             const scale = 2;
             canvas.width = 700;
-            canvas.height = 128;
+            canvas.height = toolName ? 160 : 128;
             context.scale(scale, scale);
             
             // Background - change color if there are unread messages
@@ -703,7 +890,7 @@ function updateHouseLabels() {
                 // Default black background
                 context.fillStyle = 'rgba(0, 0, 0, 0.7)';
             }
-            context.roundRect(0, 0, 350, 64, 16);
+            context.roundRect(0, 0, 350, toolName ? 80 : 64, 16);
             context.fill();
             
             // Name
@@ -714,12 +901,19 @@ function updateHouseLabels() {
             
             if (unreadFromAgent > 0) {
                 // Show name with unread indicator from agent
-                context.fillText(`${name} 🔴 ${unreadFromAgent}`, 175, 32);
+                context.fillText(`${name} 🔴 ${unreadFromAgent}`, 175, 24);
             } else if (unreadCount > 0) {
                 // Show name with sent-but-unread count
-                context.fillText(`${name} 📤 ${unreadCount}`, 175, 32);
+                context.fillText(`${name} 📤 ${unreadCount}`, 175, 24);
             } else {
-                context.fillText(name, 175, 32);
+                context.fillText(name, 175, 24);
+            }
+            
+            // Tool name text (if available)
+            if (toolName) {
+                context.font = 'italic 16px Arial';
+                context.fillStyle = '#FFD700'; // Gold color for tool name
+                context.fillText(toolName, 175, 56);
             }
             
             const texture = new THREE.CanvasTexture(canvas);
@@ -727,6 +921,10 @@ function updateHouseLabels() {
             texture.magFilter = THREE.LinearFilter;
             sprite.material.map = texture;
             sprite.material.needsUpdate = true;
+            
+            // Update position and scale based on whether tool name is shown
+            sprite.position.set(0, toolName ? 8.5 : 8, 0);
+            sprite.scale.set(8, toolName ? 2.5 : 2, 1);
         }
     });
 }

package/public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>Watercooler</title>
     <style>
         * { 
@@ -199,6 +199,23 @@
             opacity: 1;
         }
         
+        .mark-all-read-btn {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 0.75rem;
+            padding: 4px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.2s;
+            white-space: nowrap;
+        }
+        
+        .mark-all-read-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+        }
+        
         .messages-container {
             flex: 1;
             overflow-y: auto;
@@ -303,7 +320,7 @@
         }
         
         .message-text li {
-            margin: 4px 0;
+            margin: 2px 0;
         }
         
         /* Toggle Messages Button */
@@ -320,7 +337,7 @@
             font-size: 0.9rem;
             font-weight: 600;
             cursor: pointer;
-            z-index: 99;
+            z-index: 101;
             transition: all 0.3s ease;
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
         }
@@ -382,6 +399,239 @@
             border-radius: 3px;
         }
         
+        /* Mobile responsive styles */
+        @media (max-width: 768px) {
+            /* Send panel - full width at bottom */
+            .send-panel {
+                top: auto;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                width: 100%;
+                max-width: 100%;
+                border-radius: 16px 16px 0 0;
+                border-bottom: none;
+                border-left: none;
+                border-right: none;
+                box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
+            }
+            
+            .send-panel.collapsed {
+                width: 100%;
+                min-width: 100%;
+                transform: translateY(calc(100% - 75px));
+            }
+            
+            .send-header {
+                padding: 14px 20px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            }
+            
+            .send-header h2 {
+                font-size: 1rem;
+            }
+            
+            .collapse-btn {
+                font-size: 1.4rem;
+                padding: 8px 16px;
+            }
+            
+            .send-form {
+                padding: 20px;
+                max-height: 50vh;
+                overflow-y: auto;
+            }
+            
+            .recipient-select, .message-input, .send-btn {
+                font-size: 16px; /* Prevents zoom on iOS */
+                padding: 14px 16px;
+                margin-bottom: 12px;
+            }
+            
+            .message-input {
+                min-height: 80px;
+            }
+            
+            /* Messages panel - nearly full screen on mobile */
+            .messages-panel {
+                top: auto;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                width: 100%;
+                max-width: 100%;
+                max-height: 90vh;
+                height: 90vh;
+                border-radius: 16px 16px 0 0;
+                transform: translateY(100%);
+                transition: transform 0.3s ease;
+                display: flex;
+                flex-direction: column;
+            }
+            
+            .messages-panel.open {
+                right: 0;
+                transform: translateY(0);
+            }
+            
+            .messages-header {
+                padding: 20px 24px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                flex-shrink: 0;
+            }
+            
+            .messages-header h2 {
+                font-size: 1.2rem;
+            }
+            
+            .close-btn {
+                font-size: 1.8rem;
+                padding: 8px;
+            }
+            
+            .messages-container {
+                padding: 20px;
+                flex: 1;
+                max-height: calc(90vh - 80px);
+            }
+            
+            .message-card {
+                padding: 16px 16px 16px 24px;
+                margin-bottom: 12px;
+            }
+            
+            .message-sender {
+                font-size: 0.9rem;
+            }
+            
+            .message-time {
+                font-size: 0.75rem;
+            }
+            
+            .message-text {
+                font-size: 0.9rem;
+            }
+            
+            /* Toggle messages button - repositioned */
+            .toggle-messages-btn {
+                top: 20px;
+                right: 20px;
+                padding: 14px 18px;
+                font-size: 1rem;
+                border-radius: 30px;
+                z-index: 101;
+            }
+            
+            /* Toast notification - centered */
+            .toast {
+                left: 20px;
+                right: 20px;
+                bottom: auto;
+                top: 50%;
+                transform: translateY(-50%) translateY(20px);
+                text-align: center;
+                padding: 16px 24px;
+                font-size: 1rem;
+            }
+            
+            .toast.show {
+                transform: translateY(-50%) translateY(0);
+            }
+            
+            /* House dialog - full screen on mobile */
+            .house-dialog-content {
+                width: 100%;
+                max-width: 100%;
+                max-height: 95vh;
+                height: 95vh;
+                border-radius: 16px 16px 0 0;
+                margin: 0;
+                position: fixed;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                display: flex;
+                flex-direction: column;
+            }
+            
+            .house-dialog-header {
+                padding: 20px 24px;
+                flex-shrink: 0;
+            }
+            
+            .house-dialog-header h2 {
+                font-size: 1.2rem;
+            }
+            
+            .house-dialog-tabs {
+                padding: 0 12px;
+                flex-shrink: 0;
+            }
+            
+            .tab-btn {
+                padding: 16px 12px;
+                font-size: 0.9rem;
+            }
+            
+            .house-dialog-body {
+                padding: 20px;
+                max-height: calc(95vh - 140px);
+                flex: 1;
+                overflow-y: auto;
+            }
+            
+            .house-dialog-body .message-card {
+                padding: 16px 16px 16px 24px;
+            }
+            
+            /* Empty state */
+            .empty-state {
+                padding: 60px 20px;
+            }
+            
+            .empty-state p {
+                font-size: 1rem;
+            }
+        }
+        
+        /* Extra small screens */
+        @media (max-width: 480px) {
+            .send-panel.collapsed {
+                transform: translateY(calc(100% - 70px));
+            }
+            
+            .send-header {
+                padding: 12px 16px;
+            }
+            
+            .send-header h2 {
+                font-size: 0.9rem;
+            }
+            
+            .send-form {
+                padding: 16px;
+            }
+            
+            .recipient-select, .message-input, .send-btn {
+                font-size: 16px;
+                padding: 12px 14px;
+            }
+            
+            .toggle-messages-btn {
+                padding: 12px 16px;
+                font-size: 0.9rem;
+            }
+            
+            .messages-panel {
+                max-height: 75vh;
+            }
+            
+            .tab-btn {
+                font-size: 0.8rem;
+                padding: 12px 8px;
+            }
+        }
+        
         /* House Dialog */
         .house-dialog {
             display: none;
@@ -392,7 +642,7 @@
             bottom: 0;
             background: rgba(0, 0, 0, 0.7);
             z-index: 300;
-            align-items: center;
+            align-items: flex-end;
             justify-content: center;
         }
         
@@ -400,15 +650,43 @@
             display: flex;
         }
         
+        /* Desktop override for house dialog */
+        @media (min-width: 769px) {
+            .house-dialog {
+                align-items: center;
+            }
+            
+            .house-dialog-content {
+                position: relative;
+                bottom: auto;
+                left: auto;
+                right: auto;
+                border-radius: 20px;
+            }
+        }
+        
+        /* Desktop house dialog styles */
+        @media (min-width: 769px) {
+            .house-dialog-content {
+                background: rgba(255, 255, 255, 0.15);
+                backdrop-filter: blur(20px);
+                border-radius: 20px;
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+                width: 500px;
+                max-width: 90%;
+                max-height: 80vh;
+                display: flex;
+                flex-direction: column;
+            }
+        }
+        
+        /* Base house dialog styles (shared) */
         .house-dialog-content {
             background: rgba(255, 255, 255, 0.15);
             backdrop-filter: blur(20px);
-            border-radius: 20px;
             border: 1px solid rgba(255, 255, 255, 0.2);
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-            width: 500px;
-            max-width: 90%;
-            max-height: 80vh;
             display: flex;
             flex-direction: column;
         }
@@ -529,7 +807,10 @@
     <div class="messages-panel" id="messages-panel">
         <div class="messages-header">
             <h2>📨 Message History</h2>
-            <button class="close-btn" onclick="toggleMessagesPanel()">×</button>
+            <div style="display: flex; gap: 8px; align-items: center;">
+                <button class="mark-all-read-btn" onclick="markAllAsRead()">Mark all as read</button>
+                <button class="close-btn" onclick="toggleMessagesPanel()">×</button>
+            </div>
         </div>
         <div class="messages-container" id="messages-container">
             <div class="empty-state">

package/server.ts

@@ -7,13 +7,15 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const app = express();
-const PORT = process.env.PORT || 3000;
 
 // Parse CLI args
 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 port: number = parseInt(process.env.PORT || '3000', 10);
+let host: string = process.env.HOST || '0.0.0.0';
 
 for (let i = 0; i < args.length; i++) {
   if (args[i] === '--user' || args[i] === '-u') {
@@ -22,11 +24,18 @@ 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] === '--port' || args[i] === '-p') {
+    const p = parseInt(args[++i], 10);
+    if (!isNaN(p)) port = p;
+  } else if (args[i] === '--host' || args[i] === '-h') {
+    host = args[++i];
   }
 }
 
 if (!user || !mailboxPath) {
-  console.error('Usage: watercooler --user <name> --mailbox <path> [--coworkers <path>]');
+  console.error('Usage: watercooler --user <name> --mailbox <path> [--coworkers <path>] [--avatars <path>] [--port <number>] [--host <address>]');
   process.exit(1);
 }
 
@@ -35,11 +44,15 @@ console.log(`   Mailbox: ${mailboxPath}`);
 if (coworkerPath) {
   console.log(`   Coworker DB: ${coworkerPath}`);
 }
-console.log(`   URL: http://localhost:${PORT}`);
+if (avatarPath) {
+  console.log(`   Avatar DB: ${avatarPath}`);
+}
+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;
 
 try {
   db = new Database(mailboxPath);
@@ -58,6 +71,15 @@ if (coworkerPath) {
   }
 }
 
+if (avatarPath) {
+  try {
+    avatarDb = new Database(avatarPath);
+    console.log('   Avatar DB: connected');
+  } catch (err: any) {
+    console.warn('   Avatar DB error:', err.message);
+  }
+}
+
 // Helper: Check if table exists
 function tableExists(database: Database.Database | null, tableName: string): boolean {
   if (!database) return false;
@@ -225,11 +247,57 @@ app.post('/api/messages/:id/read', (req, res) => {
   }
 });
 
+// API: Get avatar states (latest tool usage per coworker)
+app.get('/api/avatars', (req, res) => {
+  try {
+    if (!avatarDb) {
+      res.json({});
+      return;
+    }
+    
+    // Check if latest_tool_usage table exists
+    const tableCheck = avatarDb.prepare(`
+      SELECT name FROM sqlite_master 
+      WHERE type='table' AND name='latest_tool_usage'
+    `).get();
+    
+    if (!tableCheck) {
+      res.json({});
+      return;
+    }
+    
+    // Get latest tool usage per name
+    const stmt = avatarDb.prepare(`
+      SELECT name, tool_name, timestamp
+      FROM latest_tool_usage
+      ORDER BY timestamp DESC
+    `);
+    
+    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}> = {};
+    for (const row of rows) {
+      if (!avatarStates[row.name]) {
+        avatarStates[row.name] = {
+          tool_name: row.tool_name,
+          timestamp: row.timestamp
+        };
+      }
+    }
+    
+    res.json(avatarStates);
+  } catch (err: any) {
+    console.error('Error in /api/avatars:', err.message);
+    res.status(500).json({ error: err.message });
+  }
+});
+
 // Config endpoint
 app.get('/api/config', (req, res) => {
-  res.json({ user, mailbox: mailboxPath, coworker: coworkerPath });
+  res.json({ user, mailbox: mailboxPath, coworker: coworkerPath, avatar: avatarPath });
 });
 
-app.listen(PORT, () => {
+app.listen(port, host, () => {
   console.log('\n✅ Watercooler running!');
 });