public/app.js

@@ -270,3 +270,32 @@ ws.onmessage = (event) => {
     loadTasks();
   }
 };
+
+// Populate agent dropdown
+async function populateAgentDropdown() {
+  try {
+    const res = await fetch('/api/agents');
+    const agents = await res.json();
+    
+    const select = document.getElementById('assignee');
+    if (!select) return;
+    
+    // Clear existing options except the first placeholder
+    select.innerHTML = '<option value="">Select agent...</option>';
+    
+    // Add agent options
+    agents.forEach(agent => {
+      const option = document.createElement('option');
+      option.value = agent.name;
+      option.textContent = agent.name;
+      select.appendChild(option);
+    });
+  } catch (err) {
+    console.error('Failed to load agents for dropdown:', err);
+  }
+}
+
+// Populate dropdown on page load
+document.addEventListener('DOMContentLoaded', () => {
+  populateAgentDropdown();
+});

public/index.html

@@ -30,7 +30,9 @@
         <h3>Create Task</h3>
         <form id="task-form">
           <input id="title" name="title" placeholder="Task title" required />
-          <input id="assignee" name="assignee" placeholder="Assignee agent" />
+          <select id="assignee" name="assignee">
+            <option value="">Select agent...</option>
+          </select>
           <select id="priority" name="priority">
             <option>Low</option>
             <option selected>Medium</option>

public/styles.css

@@ -529,3 +529,30 @@ body {
     max-height: none;
   }
 }
+
+/* Agent Dropdown Styling */
+#task-form select {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 1rem;
+  background: var(--bg);
+  color: var(--fg);
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+#task-form select:hover {
+  border-color: var(--primary);
+}
+
+#task-form select:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
+}
+
+#task-form select option {
+  padding: 0.5rem;
+}