agentdev-webui 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentdev-webui",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Multi-agent workflow dashboard for auto-ticket processing",
   "main": "server.js",
   "bin": {

package/public/js/app.js

@@ -32,6 +32,8 @@ let projectsList = [];
 let lastAgentsList = [];
 let lastHistoryList = [];
 let lastTodosList = [];
+// Track optimistic tickets that were just created but may not be in SSE data yet
+const pendingOptimisticTickets = new Map(); // "repo:number" → { ticket, created }
 
 let firstProjectMode = false;
 
@@ -1018,6 +1020,26 @@ async function createTicket() {
       formStatus.innerHTML = 'Ticket <a href="' + data.url + '" target="_blank">#' + data.number + '</a> created and added to project!';
       formStatus.className = 'form-status visible success';
 
+      // Optimistic injection: add ticket to board immediately so it doesn't
+      // disappear when an SSE broadcast arrives before GitHub indexes it
+      const optimisticTicket = {
+        number: data.number,
+        repo: data.repo || repo,
+        title: title,
+        body: body,
+        state: 'OPEN',
+        status: 'Todo',
+        hasClaude: body.toLowerCase().includes('@claude'),
+        project_id: currentProjectId || null,
+        author: '',
+        createdAt: new Date().toISOString(),
+        comments: []
+      };
+      const optKey = (data.repo || repo) + ':' + data.number;
+      pendingOptimisticTickets.set(optKey, { ticket: optimisticTicket, created: Date.now() });
+      lastTodosList.push(optimisticTicket);
+      updateTodoTickets(lastTodosList);
+
       ticketDescription.value = '';
       setTimeout(closeCreateTicketModal, 2000);
     } else {
@@ -1488,6 +1510,19 @@ const STATUS_COLORS = { 'Todo': '#4ade80', 'In Progress': '#fbbf24', 'test': '#6
 const STATUS_ORDER = ['Todo', 'In Progress', 'test', 'Done'];
 
 function updateTodoTickets(list) {
+  // Merge pending optimistic tickets into SSE data
+  for (const [key, entry] of pendingOptimisticTickets) {
+    const [repo, num] = key.split(':');
+    const numInt = parseInt(num);
+    if (list.some(t => t.repo === repo && t.number === numInt)) {
+      pendingOptimisticTickets.delete(key); // Confirmed by server
+    } else if (Date.now() - entry.created > 60000) {
+      pendingOptimisticTickets.delete(key); // Expired after 60s
+    } else {
+      list.push(entry.ticket); // Keep optimistic ticket visible
+    }
+  }
+
   // Store raw data for re-filtering
   lastTodosList = list;
 

package/public/profile.html

@@ -30,6 +30,8 @@
       height: auto !important;
       flex-direction: initial !important;
       flex: initial !important;
+      color: #333 !important;
+      background: #f5f5f5 !important;
     }
 
     html {
@@ -108,7 +110,7 @@
 
     .help-text {
       font-size: 0.875rem;
-      color: #666;
+      color: #555;
       margin-top: 0.25rem;
     }
 
@@ -255,7 +257,7 @@
     <div class="profile-section">
       <h2>Registered Agents</h2>
       <ul id="agents-list" class="agents-list">
-        <li style="text-align: center; color: #999;">Loading agents...</li>
+        <li style="text-align: center; color: #666;">Loading agents...</li>
       </ul>
     </div>
   </div>
@@ -288,7 +290,7 @@
           const list = document.getElementById('agents-list');
 
           if (agents.length === 0) {
-            list.innerHTML = '<li style="text-align: center; color: #999;">No agents registered yet</li>';
+            list.innerHTML = '<li style="text-align: center; color: #666;">No agents registered yet</li>';
             return;
           }
 
@@ -296,8 +298,8 @@
             <li class="agent-item">
               <div>
                 <strong>${agent.name}</strong>
-                ${agent.hostname ? `<div style="font-size: 0.875rem; color: #666;">${agent.hostname}</div>` : ''}
-                ${agent.last_heartbeat ? `<div style="font-size: 0.75rem; color: #999;">Last seen: ${new Date(agent.last_heartbeat).toLocaleString()}</div>` : ''}
+                ${agent.hostname ? `<div style="font-size: 0.875rem; color: #444;">${agent.hostname}</div>` : ''}
+                ${agent.last_heartbeat ? `<div style="font-size: 0.75rem; color: #666;">Last seen: ${new Date(agent.last_heartbeat).toLocaleString()}</div>` : ''}
               </div>
               <span class="agent-status ${agent.status}">${agent.status}</span>
             </li>