watercooler 0.0.4 → 0.0.6

package/public/index.html

@@ -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 */
@@ -521,7 +538,7 @@
                 transform: translateY(-50%) translateY(0);
             }
             
-            /* House dialog - full screen on mobile */
+            /* Desk dialog - full screen on mobile */
             .house-dialog-content {
                 width: 100%;
                 max-width: 100%;
@@ -615,7 +632,7 @@
             }
         }
         
-        /* House Dialog */
+        /* Desk Dialog */
         .house-dialog {
             display: none;
             position: fixed;
@@ -633,7 +650,7 @@
             display: flex;
         }
         
-        /* Desktop override for house dialog */
+        /* Desktop override for desk dialog */
         @media (min-width: 769px) {
             .house-dialog {
                 align-items: center;
@@ -648,7 +665,7 @@
             }
         }
         
-        /* Desktop house dialog styles */
+        /* Desktop desk dialog styles */
         @media (min-width: 769px) {
             .house-dialog-content {
                 background: rgba(255, 255, 255, 0.15);
@@ -664,7 +681,7 @@
             }
         }
         
-        /* Base house dialog styles (shared) */
+        /* Base desk dialog styles (shared) */
         .house-dialog-content {
             background: rgba(255, 255, 255, 0.15);
             backdrop-filter: blur(20px);
@@ -790,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">
@@ -800,12 +820,12 @@
         </div>
     </div>
     
-    <!-- House Dialog - Shows messages with specific agent -->
+    <!-- Desk Dialog - Shows messages with specific agent -->
     <div class="house-dialog" id="house-dialog">
         <div class="house-dialog-content">
             <div class="house-dialog-header">
                 <h2 id="house-dialog-title">Messages</h2>
-                <button class="close-btn" onclick="closeHouseDialog()">×</button>
+                <button class="close-btn" onclick="closeDeskDialog()">×</button>
             </div>
             <div class="house-dialog-tabs">
                 <button class="tab-btn active" id="tab-received" onclick="switchTab('received')">

package/server.ts

@@ -13,6 +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 port: number = parseInt(process.env.PORT || '3000', 10);
 let host: string = process.env.HOST || '0.0.0.0';
 
@@ -23,6 +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] === '--port' || args[i] === '-p') {
     const p = parseInt(args[++i], 10);
     if (!isNaN(p)) port = p;
@@ -32,7 +35,7 @@ for (let i = 0; i < args.length; i++) {
 }
 
 if (!user || !mailboxPath) {
-  console.error('Usage: watercooler --user <name> --mailbox <path> [--coworkers <path>] [--port <number>] [--host <address>]');
+  console.error('Usage: watercooler --user <name> --mailbox <path> [--coworkers <path>] [--avatars <path>] [--port <number>] [--host <address>]');
   process.exit(1);
 }
 
@@ -41,11 +44,15 @@ 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);
@@ -64,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;
@@ -231,9 +247,55 @@ 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, host, () => {