From 0291a7880d29b39d7cd56a6a8be66a9b5ec3f457 Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Sat, 7 Mar 2026 00:06:44 +0000
Subject: ui: Project dropdown in new task dialog, first field, defaults to
 /workspace/claudomator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Moved working directory to first field, renamed to "Project"
- Replaced text input with a select populated from GET /api/workspaces
  (lists subdirs of /workspace dynamically)
- "Create new project…" option reveals a custom path input
- elaborate result handler sets select or falls back to new-project input
- Added GET /api/workspaces endpoint in server.go

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/app.js | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 60 insertions(+), 4 deletions(-)

(limited to 'web/app.js')

diff --git a/web/app.js b/web/app.js
index 97721d3..044d779 100644
--- a/web/app.js
+++ b/web/app.js
@@ -1046,8 +1046,50 @@ function renderValidationResult(result) {
 
 // ── Task modal ────────────────────────────────────────────────────────────────
 
-function openTaskModal() {
+async function openTaskModal() {
   document.getElementById('task-modal').showModal();
+  await populateProjectSelect();
+}
+
+async function populateProjectSelect() {
+  const select = document.getElementById('project-select');
+  const current = select.value;
+  try {
+    const res = await fetch(`${API_BASE}/api/workspaces`);
+    const dirs = await res.json();
+    select.innerHTML = '';
+    dirs.forEach(dir => {
+      const opt = document.createElement('option');
+      opt.value = dir;
+      opt.textContent = dir;
+      if (dir === current || dir === '/workspace/claudomator') opt.selected = true;
+      select.appendChild(opt);
+    });
+  } catch {
+    // keep whatever options are already there
+  }
+  // Ensure "Create new project…" option is always last
+  const newOpt = document.createElement('option');
+  newOpt.value = '__new__';
+  newOpt.textContent = 'Create new project…';
+  select.appendChild(newOpt);
+}
+
+function initProjectSelect() {
+  const select = document.getElementById('project-select');
+  const newRow = document.getElementById('new-project-row');
+  const newInput = document.getElementById('new-project-input');
+  select.addEventListener('change', () => {
+    if (select.value === '__new__') {
+      newRow.hidden = false;
+      newInput.required = true;
+      newInput.focus();
+    } else {
+      newRow.hidden = true;
+      newInput.required = false;
+      newInput.value = '';
+    }
+  });
 }
 
 function closeTaskModal() {
@@ -1061,13 +1103,17 @@ function closeTaskModal() {
 }
 
 async function createTask(formData) {
+  const selectVal = formData.get('working_dir');
+  const workingDir = selectVal === '__new__'
+    ? document.getElementById('new-project-input').value.trim()
+    : selectVal;
   const body = {
     name: formData.get('name'),
     description: '',
     claude: {
       model: formData.get('model'),
       instructions: formData.get('instructions'),
-      working_dir: formData.get('working_dir'),
+      working_dir: workingDir,
       max_budget_usd: parseFloat(formData.get('max_budget_usd')),
     },
     timeout: formData.get('timeout'),
@@ -1608,6 +1654,7 @@ if (typeof document !== 'undefined') document.addEventListener('DOMContentLoaded
   // Task modal
   document.getElementById('btn-new-task').addEventListener('click', openTaskModal);
   document.getElementById('btn-cancel-task').addEventListener('click', closeTaskModal);
+  initProjectSelect();
 
   // Validate button
   document.getElementById('btn-validate').addEventListener('click', async () => {
@@ -1660,8 +1707,17 @@ if (typeof document !== 'undefined') document.addEventListener('DOMContentLoaded
         f.querySelector('[name="name"]').value = result.name;
       if (result.claude && result.claude.instructions)
         f.querySelector('[name="instructions"]').value = result.claude.instructions;
-      if (result.claude && result.claude.working_dir)
-        f.querySelector('[name="working_dir"]').value = result.claude.working_dir;
+      if (result.claude && result.claude.working_dir) {
+        const sel = document.getElementById('project-select');
+        const exists = [...sel.options].some(o => o.value === result.claude.working_dir);
+        if (exists) {
+          sel.value = result.claude.working_dir;
+        } else {
+          sel.value = '__new__';
+          document.getElementById('new-project-row').hidden = false;
+          document.getElementById('new-project-input').value = result.claude.working_dir;
+        }
+      }
       if (result.claude && result.claude.model)
         f.querySelector('[name="model"]').value = result.claude.model;
       if (result.claude && result.claude.max_budget_usd != null)
-- 
cgit v1.2.3