watercooler 0.0.8 → 0.0.10

package/README.md

@@ -1,6 +1,9 @@
-# Watercooler Village
 
-A beautiful 3D visualization of your mailbox messages as a village of coworkers.
+<div align="center"><img width="500" alt="image" src="https://github.com/user-attachments/assets/a4ab0748-cd1b-43d6-9d8b-35e64eb954a2" /></div>
+
+# WaterCooler
+
+A beautiful 3D visualization of your office of autonomous AI coworkers and their communication.
 
 ## Installation
 
@@ -45,7 +48,7 @@ npm start -- --user richard --mailbox ~/.config/opencode/mailbox.db
 
 ## Features
 
-- **3D Village**: Each coworker appears as a colorful house in a circle
+- **3D Office**: Each coworker appears as a colorful house in a circle
 - **Message Flow**: Animated particles show messages traveling between houses
 - **Visual Status**: 
   - Green lines = read messages
@@ -59,7 +62,7 @@ npm start -- --user richard --mailbox ~/.config/opencode/mailbox.db
 
 - **Backend**: Express server with SQLite
 - **Frontend**: Vanilla JavaScript + Three.js (from CDN)
-- **TypeScript**: Runs directly with tsx (included as a dependency)
+- **TypeScript**: Compiled to JavaScript for production
 
 ## Database Integration
 
@@ -69,4 +72,4 @@ Contains messages table with: id, recipient, sender, message, timestamp, read
 ### Coworker DB (optional)
 Contains coworkers table with: name, session_id, agent_type, created_at, parent_id
 
-When provided, watercooler shows ALL coworkers from the database, regardless of whether they have sent/received messages yet.
+When provided, watercooler shows ALL coworkers from the database, regardless of whether they have sent/received messages yet.

package/bin/watercooler.js

@@ -6,9 +6,9 @@ import { dirname, join } from 'path';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-const serverPath = join(__dirname, '..', 'server.ts');
+const serverPath = join(__dirname, '..', 'dist', 'server.js');
 
-const child = spawn('tsx', [serverPath, ...process.argv.slice(2)], {
+const child = spawn('node', [serverPath, ...process.argv.slice(2)], {
   stdio: 'inherit',
   shell: false
 });

package/dist/server.js

@@ -0,0 +1,296 @@
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import Database from 'better-sqlite3';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const app = express();
+// Parse CLI args
+const args = process.argv.slice(2);
+let user = null;
+let mailboxPath = null;
+let coworkerPath = null;
+let statusPath = null;
+let port = parseInt(process.env.PORT || '3000', 10);
+let host = process.env.HOST || '0.0.0.0';
+for (let i = 0; i < args.length; i++) {
+    if (args[i] === '--user' || args[i] === '-u') {
+        user = args[++i];
+    }
+    else if (args[i] === '--mailbox' || args[i] === '-m') {
+        mailboxPath = args[++i];
+    }
+    else if (args[i] === '--coworkers' || args[i] === '-c') {
+        coworkerPath = 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;
+    }
+    else if (args[i] === '--host' || args[i] === '-h') {
+        host = args[++i];
+    }
+}
+if (!user || !mailboxPath) {
+    console.error('Usage: watercooler --user <name> --mailbox <path> [--coworkers <path>] [--status <path>] [--port <number>] [--host <address>]');
+    process.exit(1);
+}
+console.log(`🚰 Watercooler for ${user}`);
+console.log(`   Mailbox: ${mailboxPath}`);
+if (coworkerPath) {
+    console.log(`   Coworker DB: ${coworkerPath}`);
+}
+if (statusPath) {
+    console.log(`   Status DB: ${statusPath}`);
+}
+console.log(`   URL: http://${host}:${port}`);
+// Databases
+let db = null;
+let coworkerDb = null;
+let statusDb = null;
+try {
+    db = new Database(mailboxPath);
+    console.log('   Mailbox DB: connected');
+}
+catch (err) {
+    console.error('   Mailbox DB error:', err.message);
+    process.exit(1);
+}
+if (coworkerPath) {
+    try {
+        coworkerDb = new Database(coworkerPath);
+        console.log('   Coworker DB: connected');
+    }
+    catch (err) {
+        console.warn('   Coworker DB error:', err.message);
+    }
+}
+if (statusPath) {
+    try {
+        statusDb = new Database(statusPath);
+        console.log('   Status DB: connected');
+    }
+    catch (err) {
+        console.warn('   Status DB error:', err.message);
+    }
+}
+// Helper: Check if table exists
+function tableExists(database, tableName) {
+    if (!database)
+        return false;
+    try {
+        const stmt = database.prepare(`
+      SELECT name FROM sqlite_master 
+      WHERE type='table' AND name=?
+    `);
+        return !!stmt.get(tableName);
+    }
+    catch {
+        return false;
+    }
+}
+// Middleware
+app.use(express.json());
+app.use(express.static(path.join(__dirname, 'public')));
+// API: Get inbox (messages TO user)
+app.get('/api/messages', (req, res) => {
+    try {
+        if (!db)
+            throw new Error('Database not connected');
+        if (!tableExists(db, 'messages')) {
+            res.json([]);
+            return;
+        }
+        const stmt = db.prepare(`
+      SELECT * FROM messages 
+      WHERE recipient = ? 
+      ORDER BY timestamp DESC
+    `);
+        res.json(stmt.all(user.toLowerCase()));
+    }
+    catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
+// API: Get sent messages (messages FROM user)
+app.get('/api/messages/sent', (req, res) => {
+    try {
+        if (!db)
+            throw new Error('Database not connected');
+        if (!tableExists(db, 'messages')) {
+            res.json([]);
+            return;
+        }
+        const stmt = db.prepare(`
+      SELECT * FROM messages 
+      WHERE sender = ? 
+      ORDER BY timestamp DESC
+    `);
+        res.json(stmt.all(user.toLowerCase()));
+    }
+    catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
+// API: Get ALL messages between ALL agents
+app.get('/api/messages/all', (req, res) => {
+    try {
+        if (!db)
+            throw new Error('Database not connected');
+        if (!tableExists(db, 'messages')) {
+            res.json([]);
+            return;
+        }
+        const stmt = db.prepare(`
+      SELECT * FROM messages 
+      ORDER BY timestamp DESC
+    `);
+        res.json(stmt.all());
+    }
+    catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
+// API: Get all coworkers (from coworker.db + message recipients)
+app.get('/api/coworkers', (req, res) => {
+    try {
+        if (!db)
+            throw new Error('Database not connected');
+        const allCoworkers = new Set();
+        // Add from coworker.db if available
+        if (coworkerDb) {
+            try {
+                const rows = coworkerDb.prepare('SELECT name FROM coworkers').all();
+                rows.forEach(row => allCoworkers.add(row.name.toLowerCase()));
+            }
+            catch (err) {
+                console.error('Error reading coworker.db:', err.message);
+            }
+        }
+        else {
+            console.log('No coworkerDb connection available');
+        }
+        // Note: Messages table is in a different database, not queried here
+        // Remove current user
+        allCoworkers.delete(user.toLowerCase());
+        const result = Array.from(allCoworkers).sort();
+        res.json(result);
+    }
+    catch (err) {
+        console.error('Error in /api/coworkers:', err.message);
+        res.status(500).json({ error: err.message });
+    }
+});
+// Legacy: Get recipients (for backwards compat)
+app.get('/api/recipients', (req, res) => {
+    try {
+        if (!db)
+            throw new Error('Database not connected');
+        if (!tableExists(db, 'messages')) {
+            res.json([]);
+            return;
+        }
+        const stmt = db.prepare(`SELECT DISTINCT recipient FROM messages`);
+        res.json(stmt.all().map((r) => r.recipient));
+    }
+    catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
+// API: Send message
+app.post('/api/send', (req, res) => {
+    try {
+        if (!db)
+            throw new Error('Database not connected');
+        // Auto-create messages table if it doesn't exist
+        if (!tableExists(db, 'messages')) {
+            db.exec(`
+        CREATE TABLE messages (
+          id INTEGER PRIMARY KEY AUTOINCREMENT,
+          recipient TEXT NOT NULL,
+          sender TEXT NOT NULL,
+          message TEXT NOT NULL,
+          timestamp INTEGER NOT NULL,
+          read INTEGER DEFAULT 0
+        )
+      `);
+        }
+        const { to, message } = req.body;
+        const stmt = db.prepare(`
+      INSERT INTO messages (recipient, sender, message, timestamp, read)
+      VALUES (?, ?, ?, ?, 0)
+    `);
+        stmt.run(to.toLowerCase(), user.toLowerCase(), message, Date.now());
+        res.json({ success: true });
+    }
+    catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
+// API: Mark read
+app.post('/api/messages/:id/read', (req, res) => {
+    try {
+        if (!db)
+            throw new Error('Database not connected');
+        if (!tableExists(db, 'messages')) {
+            res.status(404).json({ error: 'Messages table not found' });
+            return;
+        }
+        db.prepare('UPDATE messages SET read = 1 WHERE id = ?').run(req.params.id);
+        res.json({ success: true });
+    }
+    catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
+// API: Get status states (latest tool usage per coworker)
+app.get('/api/status', (req, res) => {
+    try {
+        if (!statusDb) {
+            res.json({});
+            return;
+        }
+        // Check if latest_tool_usage table exists
+        const tableCheck = statusDb.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 = statusDb.prepare(`
+      SELECT name, tool_name, timestamp
+      FROM latest_tool_usage
+      ORDER BY timestamp DESC
+    `);
+        const rows = stmt.all();
+        // Build map of name -> latest tool (first occurrence is latest due to ORDER BY)
+        const statusStates = {};
+        for (const row of rows) {
+            if (!statusStates[row.name]) {
+                statusStates[row.name] = {
+                    tool_name: row.tool_name,
+                    timestamp: row.timestamp
+                };
+            }
+        }
+        res.json(statusStates);
+    }
+    catch (err) {
+        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, status: statusPath });
+});
+app.listen(port, host, () => {
+    console.log('\n✅ Watercooler running!');
+});

package/package.json

@@ -1,21 +1,22 @@
 {
   "name": "watercooler",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "A beautiful 3D visualization of your mailbox messages as a village of coworkers",
   "type": "module",
-  "main": "server.ts",
+  "main": "dist/server.js",
   "bin": {
-    "watercooler": "./bin/watercooler.js"
+    "watercooler": "bin/watercooler.js"
   },
   "files": [
     "bin/",
     "public/",
-    "server.ts",
+    "dist/",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "start": "tsx --watch server.ts"
+    "start": "node ./dist/server.js",
+    "build": "tsc"
   },
   "keywords": [
     "watercooler",
@@ -36,8 +37,7 @@
   },
   "dependencies": {
     "better-sqlite3": "^11.8.1",
-    "express": "^4.21.2",
-    "tsx": "^4.19.2"
+    "express": "^4.21.2"
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.12",

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 = {};
             }
         }
         
@@ -1537,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) {

package/server.ts

@@ -1,303 +0,0 @@
-import express from 'express';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import Database from 'better-sqlite3';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const app = express();
-
-// 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') {
-    user = args[++i];
-  } else if (args[i] === '--mailbox' || args[i] === '-m') {
-    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>] [--avatars <path>] [--port <number>] [--host <address>]');
-  process.exit(1);
-}
-
-console.log(`🚰 Watercooler for ${user}`);
-console.log(`   Mailbox: ${mailboxPath}`);
-if (coworkerPath) {
-  console.log(`   Coworker DB: ${coworkerPath}`);
-}
-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);
-  console.log('   Mailbox DB: connected');
-} catch (err: any) {
-  console.error('   Mailbox DB error:', err.message);
-  process.exit(1);
-}
-
-if (coworkerPath) {
-  try {
-    coworkerDb = new Database(coworkerPath);
-    console.log('   Coworker DB: connected');
-  } catch (err: any) {
-    console.warn('   Coworker DB error:', err.message);
-  }
-}
-
-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;
-  try {
-    const stmt = database.prepare(`
-      SELECT name FROM sqlite_master 
-      WHERE type='table' AND name=?
-    `);
-    return !!stmt.get(tableName);
-  } catch {
-    return false;
-  }
-}
-
-// Middleware
-app.use(express.json());
-app.use(express.static(path.join(__dirname, 'public')));
-
-// API: Get inbox (messages TO user)
-app.get('/api/messages', (req, res) => {
-  try {
-    if (!db) throw new Error('Database not connected');
-    if (!tableExists(db, 'messages')) {
-      res.json([]);
-      return;
-    }
-    const stmt = db.prepare(`
-      SELECT * FROM messages 
-      WHERE recipient = ? 
-      ORDER BY timestamp DESC
-    `);
-    res.json(stmt.all(user!.toLowerCase()));
-  } catch (err: any) {
-    res.status(500).json({ error: err.message });
-  }
-});
-
-// API: Get sent messages (messages FROM user)
-app.get('/api/messages/sent', (req, res) => {
-  try {
-    if (!db) throw new Error('Database not connected');
-    if (!tableExists(db, 'messages')) {
-      res.json([]);
-      return;
-    }
-    const stmt = db.prepare(`
-      SELECT * FROM messages 
-      WHERE sender = ? 
-      ORDER BY timestamp DESC
-    `);
-    res.json(stmt.all(user!.toLowerCase()));
-  } catch (err: any) {
-    res.status(500).json({ error: err.message });
-  }
-});
-
-// API: Get ALL messages between ALL agents
-app.get('/api/messages/all', (req, res) => {
-  try {
-    if (!db) throw new Error('Database not connected');
-    if (!tableExists(db, 'messages')) {
-      res.json([]);
-      return;
-    }
-    const stmt = db.prepare(`
-      SELECT * FROM messages 
-      ORDER BY timestamp DESC
-    `);
-    res.json(stmt.all());
-  } catch (err: any) {
-    res.status(500).json({ error: err.message });
-  }
-});
-
-// API: Get all coworkers (from coworker.db + message recipients)
-app.get('/api/coworkers', (req, res) => {
-  try {
-    if (!db) throw new Error('Database not connected');
-    const allCoworkers = new Set<string>();
-    
-    // Add from coworker.db if available
-    if (coworkerDb) {
-      try {
-        const rows = coworkerDb.prepare('SELECT name FROM coworkers').all() as Array<{name: string}>;
-
-        rows.forEach(row => allCoworkers.add(row.name.toLowerCase()));
-      } catch (err: any) {
-        console.error('Error reading coworker.db:', err.message);
-      }
-    } else {
-      console.log('No coworkerDb connection available');
-    }
-    
-    // Note: Messages table is in a different database, not queried here
-    
-    // Remove current user
-    allCoworkers.delete(user!.toLowerCase());
-    
-    const result = Array.from(allCoworkers).sort();
-    res.json(result);
-  } catch (err: any) {
-    console.error('Error in /api/coworkers:', err.message);
-    res.status(500).json({ error: err.message });
-  }
-});
-
-// Legacy: Get recipients (for backwards compat)
-app.get('/api/recipients', (req, res) => {
-  try {
-    if (!db) throw new Error('Database not connected');
-    if (!tableExists(db, 'messages')) {
-      res.json([]);
-      return;
-    }
-    const stmt = db.prepare(`SELECT DISTINCT recipient FROM messages`);
-    res.json(stmt.all().map((r: any) => r.recipient));
-  } catch (err: any) {
-    res.status(500).json({ error: err.message });
-  }
-});
-
-// API: Send message
-app.post('/api/send', (req, res) => {
-  try {
-    if (!db) throw new Error('Database not connected');
-    
-    // Auto-create messages table if it doesn't exist
-    if (!tableExists(db, 'messages')) {
-      db.exec(`
-        CREATE TABLE messages (
-          id INTEGER PRIMARY KEY AUTOINCREMENT,
-          recipient TEXT NOT NULL,
-          sender TEXT NOT NULL,
-          message TEXT NOT NULL,
-          timestamp INTEGER NOT NULL,
-          read INTEGER DEFAULT 0
-        )
-      `);
-    }
-    
-    const { to, message } = req.body;
-    const stmt = db.prepare(`
-      INSERT INTO messages (recipient, sender, message, timestamp, read)
-      VALUES (?, ?, ?, ?, 0)
-    `);
-    stmt.run(to.toLowerCase(), user!.toLowerCase(), message, Date.now());
-    res.json({ success: true });
-  } catch (err: any) {
-    res.status(500).json({ error: err.message });
-  }
-});
-
-// API: Mark read
-app.post('/api/messages/:id/read', (req, res) => {
-  try {
-    if (!db) throw new Error('Database not connected');
-    if (!tableExists(db, 'messages')) {
-      res.status(404).json({ error: 'Messages table not found' });
-      return;
-    }
-    db.prepare('UPDATE messages SET read = 1 WHERE id = ?').run(req.params.id);
-    res.json({ success: true });
-  } catch (err: any) {
-    res.status(500).json({ error: err.message });
-  }
-});
-
-// 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, avatar: avatarPath });
-});
-
-app.listen(port, host, () => {
-  console.log('\n✅ Watercooler running!');
-});