aimeat 1.7.0 → 1.8.0

package/dist/public/views/profile/agents-tasks-subtab.js

@@ -1,13 +1,14 @@
 /**
  * @file agents-tasks-subtab.js
  * @description Task queue sub-tab for agent detail view.
- *   Shows queued, active, and completed tasks with inline creation form.
- *   Listens for live updates to refresh task data automatically.
+ *   Shows queued, active, and completed tasks with todo plans,
+ *   "Start this task" approval button, and progress tracking.
  * @structure
  *   - AgentTasksSubtab (default export) -- main component
- *   - TaskItem -- individual task row with expand/collapse
+ *   - TaskItem -- task row with expand/collapse, todo list, start button
  *   - TaskCreateForm -- inline task creation form
  * @version-history
+ *   v2.0.0 -- 2026-05-22 -- Add todo rendering, Start button, progress tracking
  *   v1.0.0 -- 2026-05-21 -- Initial creation for Agent Dashboard Phase 1
  */
 import { h } from 'preact';
@@ -16,54 +17,89 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { timeAgo } from '/js/utils.js';
-import { listTasks, createTask, deleteTask, listEvents } from '/js/services/agent-tasks.js';
+import { listTasks, createTask, deleteTask, startTask, listEvents } from '/js/services/agent-tasks.js';
 
 function statusLabel(status) {
   const key = `profile.agents.tasks.status.${status}`;
   const val = t(key);
-  // Fallback to capitalized status if translation key not found
   return val !== key ? val : status.charAt(0).toUpperCase() + status.slice(1);
 }
 
-function TaskItem({ task, agentName, showToast }) {
+function todoStatusIcon(status) {
+  if (status === 'done') return '✅';
+  if (status === 'failed') return '❌';
+  if (status === 'skipped') return '⏭';
+  if (status === 'active') return '▶';
+  return '⬜';
+}
+
+function todoProgress(todos) {
+  if (!todos || todos.length === 0) return null;
+  const done = todos.filter(td => td.status === 'done').length;
+  return `${done}/${todos.length}`;
+}
+
+function TaskItem({ task, agentName, showToast, onRefresh }) {
   const [expanded, setExpanded] = useState(false);
   const [events, setEvents] = useState(null);
   const [loadingEvents, setLoadingEvents] = useState(false);
+  const [starting, setStarting] = useState(false);
 
   async function handleExpand(e) {
     e.stopPropagation();
-    if (expanded) {
-      setExpanded(false);
-      return;
-    }
+    if (expanded) { setExpanded(false); return; }
     setExpanded(true);
     if (!events) {
       setLoadingEvents(true);
       try {
         const resp = await listEvents(agentName, task.id);
         setEvents(resp?.data?.events || []);
-      } catch {
-        setEvents([]);
-      }
+      } catch { setEvents([]); }
       setLoadingEvents(false);
     }
   }
 
+  async function handleStart(e) {
+    e.stopPropagation();
+    setStarting(true);
+    try {
+      await startTask(agentName, task.id);
+      showToast('Task started');
+      onRefresh();
+    } catch (err) {
+      showToast(err.message || 'Failed to start task', true);
+    }
+    setStarting(false);
+  }
+
   async function handleDelete(e) {
     e.stopPropagation();
     try {
       await deleteTask(agentName, task.id);
-      const msg = t('profile.agents.tasks.deleted');
-      showToast(msg !== 'profile.agents.tasks.deleted' ? msg : 'Task deleted');
+      showToast('Task deleted');
+      onRefresh();
     } catch (err) {
       showToast(err.message || 'Failed to delete task', true);
     }
   }
 
+  const todos = task.todos || [];
+  const hasTodos = todos.length > 0;
+  const progress = todoProgress(todos);
+  const isQueued = task.status === 'queued' || task.status === 'draft';
+  const isActive = task.status === 'active';
+  const canStart = isQueued && hasTodos;
+  const totalMinutes = todos.reduce((sum, td) => sum + (td.estimateMinutes || td.estimate_minutes || 0), 0);
+  const aimeatSteps = todos.filter(td => td.environment === 'aimeat').length;
+  const agentSteps = todos.filter(td => td.environment === 'agent').length;
+
   return html`
     <div>
       <div class="agd-task-item" onClick=${handleExpand}>
-        <span class="agd-task-title">${task.title || task.id}</span>
+        <div style="flex:1;display:flex;align-items:center;gap:0.5rem">
+          <span class="agd-task-title">${task.title || task.id}</span>
+          ${progress && html`<span class="agd-todo-progress">${progress}</span>`}
+        </div>
         <div class="agd-task-meta">
           ${task.created_at && html`<span class="agd-task-time">${timeAgo(task.created_at)}</span>`}
           <span class="agd-status agd-status-${task.status || 'draft'}">${statusLabel(task.status || 'draft')}</span>
@@ -72,30 +108,72 @@ function TaskItem({ task, agentName, showToast }) {
       ${expanded && html`
         <div class="agd-task-expanded">
           ${task.description && html`<div class="agd-task-desc">${task.description}</div>`}
-          ${task.scope && html`
-            <div class="agd-task-desc">
-              <strong>${t('profile.agents.tasks.scope') !== 'profile.agents.tasks.scope' ? t('profile.agents.tasks.scope') : 'Scope'}:</strong> ${Array.isArray(task.scope) ? task.scope.join(', ') : task.scope}
+
+          ${hasTodos && html`
+            <div class="agd-todo-section">
+              <div class="agd-todo-header">
+                <strong>TODO</strong>
+                <span class="agd-todo-summary">
+                  ${aimeatSteps > 0 && html`<span class="agd-env-badge agd-env-aimeat">AIMEAT: ${aimeatSteps}</span>`}
+                  ${agentSteps > 0 && html`<span class="agd-env-badge agd-env-agent">Agent: ${agentSteps}</span>`}
+                  ${totalMinutes > 0 && html`<span class="agd-todo-time">~${totalMinutes} min</span>`}
+                </span>
+              </div>
+              <div class="agd-todo-list">
+                ${todos.map((td, i) => html`
+                  <div class="agd-todo-item agd-todo-${td.status || 'pending'}" key=${td.id || i}>
+                    <span class="agd-todo-icon">${todoStatusIcon(td.status || 'pending')}</span>
+                    <div class="agd-todo-content">
+                      <div class="agd-todo-title">
+                        ${td.title}
+                        <span class="agd-env-badge agd-env-${td.environment || 'agent'}">${(td.environment || 'agent').toUpperCase()}</span>
+                        ${(td.estimateMinutes || td.estimate_minutes) && html`
+                          <span class="agd-todo-est">${td.estimateMinutes || td.estimate_minutes} min</span>
+                        `}
+                      </div>
+                      ${td.description && html`<div class="agd-todo-desc">${td.description}</div>`}
+                      ${(td.environmentReason || td.environment_reason) && html`
+                        <div class="agd-todo-reason">${td.environmentReason || td.environment_reason}</div>
+                      `}
+                      ${td.verification && html`<div class="agd-todo-verify">${td.verification}</div>`}
+                    </div>
+                  </div>
+                `)}
+              </div>
+            </div>
+          `}
+
+          ${!hasTodos && isQueued && html`
+            <div class="agd-todo-waiting">
+              Waiting for agent to propose a plan...
             </div>
           `}
+
           ${loadingEvents && html`<div class="agd-empty">${t('profile.loading')}</div>`}
           ${events && events.length > 0 && html`
             <div class="agd-event-log">
               ${events.map(ev => html`
                 <div class="agd-event-item" key=${ev.id || ev.timestamp}>
                   <span class="agd-event-time">${ev.timestamp ? timeAgo(ev.timestamp) : ''}</span>
-                  <span class="agd-event-type">${ev.type || ev.event || ''}</span>
-                  <span>${ev.message || ev.data || ''}</span>
+                  <span class="agd-event-type">${ev.type || ''}</span>
+                  <span>${ev.message || ''}</span>
                 </div>
               `)}
             </div>
           `}
-          ${events && events.length === 0 && html`
-            <div class="agd-empty">${t('profile.agents.tasks.noEvents') !== 'profile.agents.tasks.noEvents' ? t('profile.agents.tasks.noEvents') : 'No events recorded'}</div>
+          ${events && events.length === 0 && !isQueued && html`
+            <div class="agd-empty">No events recorded</div>
           `}
+
           <div class="agd-task-actions">
-            <button class="btn-danger btn-sm" onClick=${handleDelete}>
-              ${t('profile.agents.tasks.delete') !== 'profile.agents.tasks.delete' ? t('profile.agents.tasks.delete') : 'Delete'}
-            </button>
+            ${canStart && html`
+              <button class="btn-primary btn-sm" onClick=${handleStart} disabled=${starting}>
+                ${starting ? 'Starting...' : 'Start this task'}
+              </button>
+            `}
+            ${(isQueued || task.status === 'draft') && html`
+              <button class="btn-danger btn-sm" onClick=${handleDelete}>Delete</button>
+            `}
           </div>
         </div>
       `}
@@ -119,8 +197,7 @@ function TaskCreateForm({ agentName, showToast, onCreated, onCancel }) {
         description: description.trim() || undefined,
         status,
       });
-      const msg = t('profile.agents.tasks.created');
-      showToast(msg !== 'profile.agents.tasks.created' ? msg : 'Task created');
+      showToast('Task created');
       onCreated();
     } catch (err) {
       showToast(err.message || 'Failed to create task', true);
@@ -131,18 +208,17 @@ function TaskCreateForm({ agentName, showToast, onCreated, onCancel }) {
   return html`
     <form class="agd-create-form" onSubmit=${handleSubmit}>
       <div class="agd-form-field">
-        <label>${t('profile.agents.tasks.titleLabel') !== 'profile.agents.tasks.titleLabel' ? t('profile.agents.tasks.titleLabel') : 'Title'}</label>
+        <label>Title</label>
         <input type="text" value=${title} onInput=${(e) => setTitle(e.target.value)}
-               placeholder=${t('profile.agents.tasks.titlePlaceholder') !== 'profile.agents.tasks.titlePlaceholder' ? t('profile.agents.tasks.titlePlaceholder') : 'What should the agent do?'}
-               required />
+               placeholder="What should the agent do?" required />
       </div>
       <div class="agd-form-field">
-        <label>${t('profile.agents.tasks.descriptionLabel') !== 'profile.agents.tasks.descriptionLabel' ? t('profile.agents.tasks.descriptionLabel') : 'Description'}</label>
+        <label>Description</label>
         <textarea value=${description} onInput=${(e) => setDescription(e.target.value)}
-                  placeholder=${t('profile.agents.tasks.descriptionPlaceholder') !== 'profile.agents.tasks.descriptionPlaceholder' ? t('profile.agents.tasks.descriptionPlaceholder') : 'Detailed instructions (optional)'}></textarea>
+                  placeholder="Detailed instructions (optional)"></textarea>
       </div>
       <div class="agd-form-field">
-        <label>${t('profile.agents.tasks.initialStatus') !== 'profile.agents.tasks.initialStatus' ? t('profile.agents.tasks.initialStatus') : 'Initial status'}</label>
+        <label>Initial status</label>
         <select value=${status} onChange=${(e) => setStatus(e.target.value)}>
           <option value="draft">${statusLabel('draft')}</option>
           <option value="queued">${statusLabel('queued')}</option>
@@ -150,13 +226,9 @@ function TaskCreateForm({ agentName, showToast, onCreated, onCancel }) {
       </div>
       <div class="agd-form-actions">
         <button type="submit" class="btn-primary btn-sm" disabled=${saving || !title.trim()}>
-          ${saving
-            ? (t('profile.agents.tasks.creating') !== 'profile.agents.tasks.creating' ? t('profile.agents.tasks.creating') : 'Creating...')
-            : (t('profile.agents.tasks.createBtn') !== 'profile.agents.tasks.createBtn' ? t('profile.agents.tasks.createBtn') : 'Create Task')}
-        </button>
-        <button type="button" class="btn-outline btn-sm" onClick=${onCancel}>
-          ${t('profile.agents.scopeUi.cancel')}
+          ${saving ? 'Creating...' : 'Create Task'}
         </button>
+        <button type="button" class="btn-outline btn-sm" onClick=${onCancel}>Cancel</button>
       </div>
     </form>
   `;
@@ -178,11 +250,8 @@ export default function AgentTasksSubtab({ agentName, session, showToast }) {
     }
   }
 
-  useEffect(() => {
-    loadTasks();
-  }, [agentName]);
+  useEffect(() => { loadTasks(); }, [agentName]);
 
-  // Live update listener
   const loadRef = useRef(loadTasks);
   loadRef.current = loadTasks;
   useEffect(() => {
@@ -200,7 +269,6 @@ export default function AgentTasksSubtab({ agentName, session, showToast }) {
     return html`<div class="agd-empty">${t('profile.loading')}</div>`;
   }
 
-  // Group tasks by status category
   const active = tasks.filter(t => t.status === 'active');
   const queued = tasks.filter(t => t.status === 'queued' || t.status === 'draft');
   const completed = tasks.filter(t => t.status === 'done' || t.status === 'failed' || t.status === 'stalled');
@@ -209,11 +277,10 @@ export default function AgentTasksSubtab({ agentName, session, showToast }) {
     <div>
       <div class="agd-section-header">
         <span class="agd-section-title">
-          ${t('profile.agents.tasks.title') !== 'profile.agents.tasks.title' ? t('profile.agents.tasks.title') : 'Tasks'}
-          ${tasks.length > 0 && html` (${tasks.length})`}
+          TASK QUEUE${tasks.length > 0 ? ` (${tasks.length})` : ''}
         </span>
-        <button class="btn-outline btn-sm" onClick=${(e) => { e.stopPropagation(); setShowCreate(!showCreate); }}>
-          ${showCreate ? '-' : '+'} ${t('profile.agents.tasks.newTask') !== 'profile.agents.tasks.newTask' ? t('profile.agents.tasks.newTask') : 'New Task'}
+        <button class="btn-outline btn-sm" onClick=${() => setShowCreate(!showCreate)}>
+          ${showCreate ? '-' : '+'} New Task
         </button>
       </div>
 
@@ -224,30 +291,22 @@ export default function AgentTasksSubtab({ agentName, session, showToast }) {
       ${error && html`<div class="agd-empty">${error}</div>`}
 
       ${active.length > 0 && html`
-        <div class="agd-section-title" style="margin-top:0.5rem;margin-bottom:0.25rem">
-          ${t('profile.agents.tasks.activeSection') !== 'profile.agents.tasks.activeSection' ? t('profile.agents.tasks.activeSection') : 'Active'}
-        </div>
-        ${active.map(task => html`<${TaskItem} key=${task.id} task=${task} agentName=${agentName} showToast=${showToast} />`)}
+        <div class="agd-section-title" style="margin-top:0.5rem;margin-bottom:0.25rem">ACTIVE</div>
+        ${active.map(task => html`<${TaskItem} key=${task.id} task=${task} agentName=${agentName} showToast=${showToast} onRefresh=${loadTasks} />`)}
       `}
 
       ${queued.length > 0 && html`
-        <div class="agd-section-title" style="margin-top:0.5rem;margin-bottom:0.25rem">
-          ${t('profile.agents.tasks.queuedSection') !== 'profile.agents.tasks.queuedSection' ? t('profile.agents.tasks.queuedSection') : 'Queued'}
-        </div>
-        ${queued.map(task => html`<${TaskItem} key=${task.id} task=${task} agentName=${agentName} showToast=${showToast} />`)}
+        <div class="agd-section-title" style="margin-top:0.5rem;margin-bottom:0.25rem">QUEUED</div>
+        ${queued.map(task => html`<${TaskItem} key=${task.id} task=${task} agentName=${agentName} showToast=${showToast} onRefresh=${loadTasks} />`)}
       `}
 
       ${completed.length > 0 && html`
-        <div class="agd-section-title" style="margin-top:0.5rem;margin-bottom:0.25rem">
-          ${t('profile.agents.tasks.completedSection') !== 'profile.agents.tasks.completedSection' ? t('profile.agents.tasks.completedSection') : 'Completed'}
-        </div>
-        ${completed.map(task => html`<${TaskItem} key=${task.id} task=${task} agentName=${agentName} showToast=${showToast} />`)}
+        <div class="agd-section-title" style="margin-top:0.5rem;margin-bottom:0.25rem">COMPLETED</div>
+        ${completed.map(task => html`<${TaskItem} key=${task.id} task=${task} agentName=${agentName} showToast=${showToast} onRefresh=${loadTasks} />`)}
       `}
 
       ${tasks.length === 0 && !showCreate && html`
-        <div class="agd-empty">
-          ${t('profile.agents.tasks.empty') !== 'profile.agents.tasks.empty' ? t('profile.agents.tasks.empty') : 'No tasks yet. Create one to get started.'}
-        </div>
+        <div class="agd-empty">No tasks yet. Create one to get started.</div>
       `}
     </div>
   `;

package/dist/public/views/profile/generator-detail.js

@@ -32,7 +32,7 @@ import {
 // DEPRECATED: browser-side prompt builders no longer used. Prompts loaded from database via API.
 // import { buildComponentPrompt, buildFixPrompt, buildReflectionPrompt, buildTestPrompt } from '/js/services/generator-prompts.js';
 import { validateComponent } from '/js/services/generator-validate.js';
-import { validateExtensionSpec, validateDataApiSpec, validateComponentSpec, validateAppDomainSpec } from '/js/services/generator-spec-validate.js';
+import { validateExtensionSpec, validateDataApiSpec, validateComponentSpec, validateAppDomainSpec, validateAppSpec } from '/js/services/generator-spec-validate.js';
 import { verifyContract } from '/js/services/generator-contract.js';
 import { smokeTest } from '/js/services/generator-smoke.js';
 import { createBundle } from '/js/services/generator-context-bundle.js';
@@ -672,6 +672,7 @@ export function ComponentDetail({ component, project, components, projectId, int
                 // Validate spec structure
                 let sv;
                 if (component.type === 'extension') sv = validateExtensionSpec(parsed);
+                else if (component.type === 'app') sv = validateAppSpec(parsed);
                 else if (component.subtype === 'data') sv = validateDataApiSpec(parsed);
                 else if (component.subtype === 'component') sv = validateComponentSpec(parsed);
                 else if (component.subtype === 'app-domain') sv = validateAppDomainSpec(parsed);
@@ -705,6 +706,12 @@ export function ComponentDetail({ component, project, components, projectId, int
                 try {
                   const parsed = JSON.parse(specResult);
                   await saveSpec(projectId, component.id, parsed);
+                  // Rebuild code prompt now that the spec is saved
+                  const freshPrompt = await loadPromptFromBackend(projectId, component.id, 'code');
+                  setGeneratedPrompt(freshPrompt);
+                  if (component.prompt) {
+                    await saveComponent(projectId, { ...component, prompt: freshPrompt, spec: parsed });
+                  }
                   showToast?.('Spec saved');
                   onUpdate();
                 } catch (e) {