claudeboard 3.1.0 → 3.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeboard",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "Visual orchestrator for Claude Code agent teams",
   "bin": {
     "claudeboard": "bin/cli.js"
@@ -32,5 +32,8 @@
     "express": "^4.18.2",
     "open": "^10.1.0",
     "ws": "^8.16.0"
+  },
+  "devDependencies": {
+    "supabase": "^2.78.1"
   }
 }

package/public/app.js

@@ -76,6 +76,13 @@ const dom = {
   deployBtn:          document.getElementById('deployBtn'),
   // Board empty state
   boardEmptyState:    document.getElementById('boardEmptyState'),
+  // Human action drawer
+  humanActionDrawer:  document.getElementById('humanActionDrawer'),
+  humanActionTitle:   document.getElementById('humanActionTitle'),
+  humanActionBody:    document.getElementById('humanActionBody'),
+  humanActionTaskId:  document.getElementById('humanActionTaskId'),
+  humanActionResolve: document.getElementById('humanActionResolve'),
+  humanActionDismiss: document.getElementById('humanActionDismiss'),
   // PRD upload
   prdFileInput:       document.getElementById('prdFileInput'),
   // Supabase modal
@@ -257,6 +264,9 @@ function handleMessage(msg) {
     case 'deploy:done':
       handleDeployDone(msg.url);
       break;
+    case 'task:blocked':
+      handleTaskBlocked(msg.taskId, msg.taskTitle, msg.humanActions);
+      break;
     case 'supabase:preflight':
       handleSupabasePreflight(msg.taskTitles || []);
       break;
@@ -570,6 +580,44 @@ function handleDeployDone(url) {
   }
 }
 
+// ── Human Intervention Notification ──────────────────────────
+function handleTaskBlocked(taskId, taskTitle, humanActions) {
+  // Update task state
+  const task = state.tasks.get(taskId);
+  if (task) {
+    task.status = 'error';
+    task.needsHuman = true;
+    task.humanActions = humanActions;
+    state.tasks.set(taskId, task);
+    renderBoard();
+  }
+
+  // Show notification drawer
+  const drawer = dom.humanActionDrawer;
+  if (!drawer) return;
+
+  dom.humanActionTitle.textContent = taskTitle || 'Tarea';
+  dom.humanActionBody.innerHTML = '';
+
+  // Render each action as a list item
+  const lines = (humanActions || '').split('\n').map(l => l.trim()).filter(Boolean);
+  lines.forEach(line => {
+    const li = document.createElement('div');
+    li.className = 'human-action-item';
+    // Strip leading dashes/bullets
+    li.textContent = line.replace(/^[-•*]\s*/, '');
+    dom.humanActionBody.appendChild(li);
+  });
+
+  dom.humanActionTaskId.value = taskId;
+  drawer.classList.add('visible');
+  drawer.dataset.taskId = taskId;
+}
+
+function dismissHumanDrawer() {
+  dom.humanActionDrawer.classList.remove('visible');
+}
+
 // ── Supabase Pre-flight Modal ─────────────────────────────────
 function handleSupabasePreflight(taskTitles) {
   // Populate task list
@@ -1302,6 +1350,18 @@ if (dom.deployBtn) {
 
 dom.prdBtn.addEventListener('click', openPRD);
 
+// Human action drawer
+if (dom.humanActionResolve) {
+  dom.humanActionResolve.addEventListener('click', () => {
+    const taskId = dom.humanActionDrawer.dataset.taskId;
+    if (taskId) sendWS({ type: 'task:resolve', taskId });
+    dismissHumanDrawer();
+  });
+}
+if (dom.humanActionDismiss) {
+  dom.humanActionDismiss.addEventListener('click', dismissHumanDrawer);
+}
+
 // PRD file upload
 dom.prdFileInput.addEventListener('change', (e) => {
   handlePRDFileUpload(e.target.files[0]);

package/public/index.html

@@ -190,6 +190,29 @@
     <span id="qaToastText">Agente QA revisando el proyecto…</span>
   </div>
 
+  <!-- Human Action Required Drawer -->
+  <div id="humanActionDrawer" class="human-drawer">
+    <div class="human-drawer-inner">
+      <div class="human-drawer-header">
+        <div class="human-drawer-title-row">
+          <span class="human-drawer-icon">&#9888;</span>
+          <div>
+            <div class="human-drawer-label">Acción requerida &mdash; los agentes están esperando</div>
+            <div class="human-drawer-task" id="humanActionTitle"></div>
+          </div>
+        </div>
+        <button class="btn-icon" id="humanActionDismiss" title="Cerrar">&#10005;</button>
+      </div>
+      <div class="human-drawer-desc">El agente completó el código pero necesita que vos hagas estos pasos externos:</div>
+      <div class="human-action-list" id="humanActionBody"></div>
+      <input type="hidden" id="humanActionTaskId">
+      <div class="human-drawer-footer">
+        <button class="btn-secondary" id="humanActionDismiss2" onclick="dismissHumanDrawer()">Omitir por ahora</button>
+        <button class="btn-primary" id="humanActionResolve">&#10003;&nbsp; Ya lo hice &mdash; continuar</button>
+      </div>
+    </div>
+  </div>
+
   <!-- Supabase Credentials Modal -->
   <div id="supabaseModal" class="modal" style="display:none">
     <div class="modal-backdrop" id="supabaseModalBackdrop"></div>

package/public/style.css

@@ -1419,6 +1419,103 @@ html, body {
   color: var(--accent);
 }
 
+/* ── Human Action Required Drawer ───────────────────────── */
+.human-drawer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1100;
+  transform: translateY(110%);
+  transition: transform 0.3s cubic-bezier(0.34, 1.1, 0.64, 1);
+  pointer-events: none;
+}
+
+.human-drawer.visible {
+  transform: translateY(0);
+  pointer-events: all;
+}
+
+.human-drawer-inner {
+  max-width: 680px;
+  margin: 0 auto 1.5rem;
+  background: #1a1208;
+  border: 1.5px solid rgba(245, 158, 11, 0.55);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 -4px 40px rgba(245, 158, 11, 0.12), 0 8px 60px rgba(0,0,0,0.6);
+  padding: 1.25rem 1.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+.human-drawer-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.human-drawer-title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.human-drawer-icon {
+  font-size: 1.5rem;
+  color: #f59e0b;
+  flex-shrink: 0;
+  line-height: 1;
+  margin-top: 2px;
+}
+
+.human-drawer-label {
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #f59e0b;
+  margin-bottom: 3px;
+}
+
+.human-drawer-task {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text);
+  line-height: 1.3;
+}
+
+.human-drawer-desc {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.human-action-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.human-action-item {
+  font-size: 0.82rem;
+  color: var(--text);
+  background: rgba(245, 158, 11, 0.07);
+  border-left: 3px solid rgba(245, 158, 11, 0.5);
+  padding: 0.5rem 0.75rem;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  line-height: 1.5;
+}
+
+.human-drawer-footer {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  padding-top: 0.25rem;
+}
+
 /* ── Subir PRD button (label styled as btn-secondary) ───── */
 .btn-upload-prd {
   cursor: pointer;

package/src/orchestrator.js

@@ -78,6 +78,42 @@ function isSupabaseTask(task) {
   return /supabase/.test(text);
 }
 
+// Patterns that indicate the agent flagged a required manual step in its HANDOFF
+const HUMAN_REQUIRED_PATTERNS = [
+  /paso manual obligatorio/i,
+  /configurar.*dashboard/i,
+  /supabase dashboard/i,
+  /google cloud console/i,
+  /authentication.*providers/i,
+  /client id.*client secret/i,
+  /client secret/i,
+  /authorized redirect uri/i,
+  /redirect url.*permitid/i,
+  /habilitar.*provider/i,
+  /manual step/i,
+  /manually configure/i,
+  /variables de entorno.*producción/i,
+  /netlify.*env/i,
+  /stripe.*dashboard/i,
+  /twilio.*console/i,
+  /sendgrid.*dashboard/i,
+  /configurar.*en.*panel/i,
+];
+
+function requiresHumanIntervention(handoffText) {
+  return HUMAN_REQUIRED_PATTERNS.some(p => p.test(handoffText));
+}
+
+// Extract the "Lo que falta:" section from a HANDOFF as the action items
+function extractHumanActions(handoffText) {
+  const sectionMatch = handoffText.match(/lo que falta[:\s]*([\s\S]*?)(?:\n\nArchivos|\n\nDecisiones|$)/i);
+  if (sectionMatch && sectionMatch[1].trim()) return sectionMatch[1].trim().slice(0, 2000);
+  // Fallback: lines that match manual patterns
+  const lines = handoffText.split('\n').filter(l => HUMAN_REQUIRED_PATTERNS.some(p => p.test(l)));
+  if (lines.length) return lines.join('\n').slice(0, 2000);
+  return handoffText.slice(0, 500);
+}
+
 // Strip null bytes and enforce length limit before any input reaches the CLI
 function sanitizeInput(str) {
   if (typeof str !== 'string') return '';
@@ -402,16 +438,42 @@ Lo que falta: [si algo quedó pendiente, si no nada]
     clearTimeout(timer);
     activeAgents.delete(task.id);
     const current = getTask(task.id);
-    // Extract and save handoff note for future agents
+
     if (current) {
       const outputText = Array.isArray(current.output)
         ? current.output.map(e => e.chunk || '').join('')
         : (current.output || '');
+
+      // Extract and save handoff for future agents
       const handoffMatch = outputText.match(/<HANDOFF>([\s\S]*?)<\/HANDOFF>/);
-      if (handoffMatch) writeHandoff(task.id, handoffMatch[1].trim());
-    }
-    if (current && current.status === 'in_progress') {
-      runVerifier(current, broadcast, processQueue);
+      const handoffText = handoffMatch ? handoffMatch[1].trim() : '';
+      if (handoffText) writeHandoff(task.id, handoffText);
+
+      // ── Human intervention detection ──────────────────────────
+      // If the agent flagged manual steps (e.g. "configure in Supabase Dashboard"),
+      // block the task instead of verifying — the code is done but needs external config.
+      if (handoffText && requiresHumanIntervention(handoffText)) {
+        const humanActions = extractHumanActions(handoffText);
+        updateTask(task.id, {
+          status: 'error',
+          needsHuman: true,
+          humanReason: 'Requiere configuración manual externa',
+          humanActions,
+        });
+        if (broadcast) broadcast({
+          type: 'task:blocked',
+          taskId: task.id,
+          taskTitle: current.title,
+          humanActions,
+        });
+        notify('task:failed', { taskTitle: current.title, status: 'blocked' });
+        processQueue(); // continue with other tasks that don't need manual steps
+        return;
+      }
+
+      if (current.status === 'in_progress') {
+        runVerifier(current, broadcast, processQueue);
+      }
     }
     processQueue();
   });
@@ -755,10 +817,149 @@ function runQA() {
   spawnQAAgent(getTasks());
 }
 
-// Upload PRD from a markdown file — sends it through the orchestrator to generate tasks
+// Upload PRD: uses a dedicated planner agent (bypasses the 10k conversational limit)
 function uploadPRD(content) {
-  const trimmed = content.slice(0, 20000);
-  sendMessage(`Tengo mi PRD listo. Analizalo y creá las tareas necesarias para implementarlo:\n\n${trimmed}`);
+  spawnPRDPlannerAgent(content);
+}
+
+// Dedicated PRD planner agent — decomposes a full PRD into granular tasks
+function spawnPRDPlannerAgent(rawContent) {
+  // Save the full PRD to disk first
+  try { savePRD(rawContent); } catch { /* non-fatal */ }
+  if (broadcast) broadcast({ type: 'prd:generated' });
+  if (broadcast) broadcast({ type: 'orchestrator:thinking' });
+
+  const projectPath = getProjectPath();
+  let plannerBuffer = '';
+  let tasksParsed = false;
+
+  // Collect project context to help Claude understand the tech stack
+  let projectCtx = '';
+  try {
+    const ctx = scanProject(projectPath);
+    if (ctx) {
+      const lines = [];
+      if (ctx.techStack.length)  lines.push(`Stack detectado: ${ctx.techStack.join(', ')}`);
+      if (ctx.pkgDescription)    lines.push(`Descripción: ${ctx.pkgDescription}`);
+      if (ctx.fileTree)          lines.push(`Árbol de archivos:\n${ctx.fileTree.slice(0, 1500)}`);
+      if (ctx.existingPrd)       lines.push(`PRD anterior:\n${ctx.existingPrd.slice(0, 500)}`);
+      projectCtx = lines.length ? `\n\nContexto del proyecto:\n${lines.join('\n')}` : '';
+    }
+  } catch { /* ignore */ }
+
+  // Cap PRD at 180 KB — well above any realistic PRD
+  const prdContent = rawContent.slice(0, 180 * 1024);
+
+  const prompt = `Sos el arquitecto de software de ClaudeBoard. Tu único trabajo es leer el PRD completo y descomponerlo en TODAS las tareas atómicas necesarias para construir el proyecto de cero a producción.${projectCtx}
+
+━━━ REGLAS DE GRANULARIDAD ━━━
+• Cada tarea = 1 unidad de trabajo concreto que un agente puede completar solo (1 endpoint, 1 tabla, 1 componente, 1 página, 1 integración, etc.)
+• Tamaño justo: ni mega-tareas ("hacer todo el backend") ni micro-tareas triviales de 2 líneas
+• Para un proyecto mediano esperás 30–60 tareas. Para uno grande, 60–150 tareas. No te limites.
+• Cada tarea debe poder ejecutarse de forma independiente con el contexto del handoff del agente anterior
+
+━━━ ORDEN DE CONSTRUCCIÓN (seguir esta secuencia) ━━━
+1. Setup del proyecto (estructura, configs, variables de entorno, dependencias)
+2. Base de datos (cada tabla/schema/migración es una tarea separada)
+3. Autenticación y permisos
+4. Backend — APIs y lógica de negocio (un endpoint o módulo por tarea)
+5. Integraciones externas (pagos, emails, storage, webhooks, etc.)
+6. Frontend — layout, componentes base y sistema de diseño
+7. Frontend — páginas y features (una por tarea)
+8. Lógica de tiempo real / subscripciones si aplica
+9. Testing y validación
+10. Deploy, CI/CD y variables de producción
+
+━━━ FORMATO EXACTO (sin texto antes ni después del bloque) ━━━
+<TASKS>
+<TASK>
+title: [verbo + módulo concreto — ej: "Crear tabla profiles con RLS en Supabase"]
+description: [qué crear o modificar exactamente, qué archivos tocar, qué debe funcionar al terminar — todo en una sola línea]
+successCriteria: [cómo verificar que está hecho — en una sola línea]
+priority: high|medium|low
+</TASK>
+</TASKS>
+
+━━━ PRD COMPLETO A PLANIFICAR ━━━
+${prdContent}`;
+
+  const proc = spawnClaude(prompt, projectPath);
+
+  proc.stdout.on('data', (data) => {
+    const chunk = data.toString('utf-8');
+    plannerBuffer += chunk;
+    // Stream progress to chat so the user sees something happening
+    if (broadcast) broadcast({ type: 'orchestrator:chunk', chunk });
+  });
+
+  proc.stderr.on('data', () => { /* swallow */ });
+
+  proc.on('close', () => {
+    if (!tasksParsed) {
+      tasksParsed = true;
+      const created = parsePlannerTasks(plannerBuffer);
+      if (broadcast) broadcast({ type: 'orchestrator:done' });
+      if (created.length > 0) {
+        if (broadcast) broadcast({
+          type: 'orchestrator:chunk',
+          chunk: `\n\n✅ **PRD procesado:** ${created.length} tareas creadas en el board. Los agentes arrancan ahora.`,
+        });
+      } else {
+        if (broadcast) broadcast({
+          type: 'orchestrator:chunk',
+          chunk: '\n\n⚠️ No se pudieron extraer tareas del PRD. Intentá pegarlo en el chat directamente.',
+        });
+      }
+    }
+  });
+
+  proc.on('error', (err) => {
+    console.error('[prd-planner] spawn error:', err.message);
+    if (broadcast) broadcast({ type: 'orchestrator:error', message: 'Error al procesar el PRD. ¿Está el CLI de Claude instalado?' });
+  });
+}
+
+// Parse tasks from planner output and enqueue them
+function parsePlannerTasks(buffer) {
+  let taskDefs = [];
+
+  const taskBlocks = [...buffer.matchAll(/<TASK>([\s\S]*?)<\/TASK>/g)];
+  if (taskBlocks.length > 0) {
+    taskDefs = taskBlocks.map(m => {
+      const block = m[1];
+      const get = (key) => {
+        const match = block.match(new RegExp(`^${key}:\\s*(.+)$`, 'mi'));
+        return match ? match[1].trim() : '';
+      };
+      return {
+        title:           get('title'),
+        description:     get('description'),
+        successCriteria: get('successCriteria'),
+        priority:        get('priority') || 'medium',
+      };
+    }).filter(t => t.title);
+  }
+
+  if (taskDefs.length === 0) return [];
+
+  const created = taskDefs.map(t => createTask(t));
+  if (broadcast) broadcast({ type: 'tasks:created', tasks: created });
+  notify('tasks:created', { taskTitle: null, status: 'created' });
+  qaAgentRan = false;
+
+  // Check if any task requires Supabase credentials
+  const needsSupabase = taskDefs.some(isSupabaseTask);
+  if (needsSupabase && !awaitingSupabaseCreds) {
+    awaitingSupabaseCreds = true;
+    if (broadcast) broadcast({
+      type: 'supabase:preflight',
+      taskTitles: created.map(t => t.title),
+    });
+  } else {
+    processQueue();
+  }
+
+  return created;
 }
 
 // Called when the user submits Supabase credentials from the modal

package/src/verifier.js

@@ -50,11 +50,14 @@ ${agentOutput || '(no output)'}
 
 Instructions:
 1. Read the relevant files in the project directory to check the actual result.
-2. Your ENTIRE response must be ONE of these two formats, nothing else:
+2. Your ENTIRE response must be ONE of these three formats, nothing else:
    VERIFIED
    FAILED: <one sentence reason>
+   NEEDS_HUMAN: <one sentence describing what manual external step is required>
 
-Do not add explanations, greetings, or any other text. Start your response with VERIFIED or FAILED.`;
+Use NEEDS_HUMAN if and only if the task requires external manual configuration that cannot be verified from code — for example: configuring OAuth providers in a dashboard, setting environment variables in a deployment service, adding API credentials in a third-party console, or any step that requires clicking in a web UI outside the codebase.
+
+Do not add explanations, greetings, or any other text. Start your response with VERIFIED, FAILED, or NEEDS_HUMAN.`;
 
   broadcast({ type: 'task:verifying', taskId: task.id });
   updateTask(task.id, { status: 'verifying' });
@@ -72,9 +75,9 @@ Do not add explanations, greetings, or any other text. Start your response with
 
   proc.on('close', () => {
     const trimmed = output.trim();
-    // Flexible parsing: check anywhere in the first 300 chars
     const head = trimmed.slice(0, 300).toUpperCase();
-    const isVerified = head.includes('VERIFIED') && !head.includes('FAILED');
+    const isVerified   = head.includes('VERIFIED')    && !head.includes('FAILED') && !head.includes('NEEDS_HUMAN');
+    const needsHuman   = head.includes('NEEDS_HUMAN') || head.includes('NEEDS HUMAN');
 
     if (isVerified) {
       updateTask(task.id, { status: 'done', verifierOutput: trimmed.slice(0, 500) });
@@ -83,6 +86,23 @@ Do not add explanations, greetings, or any other text. Start your response with
       return;
     }
 
+    // Verifier detected this needs manual external configuration
+    if (needsHuman) {
+      const humanMatch = trimmed.match(/NEEDS[_\s]HUMAN[:\s]+(.+?)(?:\n|$)/i);
+      const humanReason = humanMatch ? humanMatch[1].trim().slice(0, 500) : 'Requiere configuración manual externa';
+      updateTask(task.id, {
+        status: 'error',
+        needsHuman: true,
+        humanReason,
+        humanActions: humanReason,
+        verifierOutput: trimmed.slice(0, 500),
+      });
+      broadcast({ type: 'task:blocked', taskId: task.id, taskTitle: task.title, humanActions: humanReason });
+      notify('task:failed', { taskTitle: task.title, status: 'blocked' });
+      if (onRetry) onRetry(); // continue queue with other tasks
+      return;
+    }
+
     // Extract failure reason
     const failedMatch = trimmed.match(/FAILED[:\s]+(.+?)(?:\n|$)/i);
     const reason = failedMatch