aimeat 1.7.0 → 1.9.0

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

@@ -1,13 +1,18 @@
 /**
  * @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.
+ *   Filter pills allow switching between all/active/queued/completed/failed views.
  * @structure
- *   - AgentTasksSubtab (default export) -- main component
- *   - TaskItem -- individual task row with expand/collapse
- *   - TaskCreateForm -- inline task creation form
+ *   - AgentTasksSubtab (default export) -- main component with filter pills
+ *   - TaskItem -- task row with expand/collapse, todo list, start button
  * @version-history
+ *   v3.2.0 -- 2026-05-24 -- Add interactive filter pills, scope/rules display, migrate to pf-agd- CSS prefix
+ *   v3.1.0 -- 2026-05-24 -- Fix: use correct locale key for empty state
+ *   v3.0.0 -- 2026-05-22 -- Replace TaskCreateForm with TaskCreationBuilder (design spec split-panel)
+ *   v2.1.0 -- 2026-05-22 -- Fix: use camelCase field names from API; add task and todo timestamps
+ *   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,86 +21,195 @@ 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, deleteTask, startTask, listEvents } from '/js/services/agent-tasks.js';
+import TaskCreationBuilder from './agents-task-builder.js';
+
+const TASK_FILTERS = ['all', 'active', 'queued', 'completed', 'failed'];
 
 function statusLabel(status) {
-  const key = `profile.agents.tasks.status.${status}`;
+  const key = `profile.agents.tasks.${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(t('profile.agents.tasks.taskStarted'));
+      onRefresh();
+    } catch (err) {
+      showToast(err.message || t('profile.agents.tasks.startError'), 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(t('profile.agents.tasks.taskDeleted'));
+      onRefresh();
     } catch (err) {
-      showToast(err.message || 'Failed to delete task', true);
+      showToast(err.message || t('profile.agents.tasks.deleteError'), 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 || 0), 0);
+  const aimeatSteps = todos.filter(td => td.environment === 'aimeat').length;
+  const agentSteps = todos.filter(td => td.environment === 'agent').length;
+
+  function formatDateTime(iso) {
+    if (!iso) return '';
+    const d = new Date(iso);
+    return d.toLocaleDateString([], { day: 'numeric', month: 'short' }) + ' ' +
+           d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+
   return html`
     <div>
-      <div class="agd-task-item" onClick=${handleExpand}>
-        <span class="agd-task-title">${task.title || task.id}</span>
-        <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>
+      <div class="pf-agd-task-item" onClick=${handleExpand}>
+        <div class="pf-agd-task-title-row">
+          <span class="pf-agd-task-title">${task.title || task.id}</span>
+          ${progress && html`<span class="pf-agd-todo-progress">${progress}</span>`}
+        </div>
+        <div class="pf-agd-task-meta">
+          ${task.createdAt && html`<span class="pf-agd-task-time">${timeAgo(task.createdAt)}</span>`}
+          <span class="pf-agd-status pf-agd-status-${task.status || 'draft'}">${statusLabel(task.status || 'draft')}</span>
         </div>
       </div>
       ${expanded && html`
-        <div class="agd-task-expanded">
-          ${task.description && html`<div class="agd-task-desc">${task.description}</div>`}
+        <div class="pf-agd-task-expanded">
+          ${task.description && html`<div class="pf-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}
+            <div class="pf-agd-info-row">
+              <span class="pf-agd-info-label">${t('profile.agents.detail.tasks.scope')}</span>
+              <span class="pf-agd-info-value">${Array.isArray(task.scope) ? task.scope.join(', ') : task.scope}</span>
+            </div>
+          `}
+          ${task.rules && task.rules.length > 0 && html`
+            <div class="pf-agd-info-row">
+              <span class="pf-agd-info-label">${t('profile.agents.detail.tasks.rules')}</span>
+              <span class="pf-agd-info-value">
+                ${Array.isArray(task.rules) ? task.rules.map(r => html`<div key=${r}>${r}</div>`) : task.rules}
+              </span>
+            </div>
+          `}
+
+          <div class="pf-agd-task-timestamps">
+            ${task.createdAt && html`<span>${t('profile.agents.tasks.created')}: ${formatDateTime(task.createdAt)}</span>`}
+            ${task.updatedAt && task.updatedAt !== task.createdAt && html`<span>${t('profile.agents.tasks.updated')}: ${formatDateTime(task.updatedAt)}</span>`}
+            ${task.completedAt && html`<span>${t('profile.agents.tasks.completed')}: ${formatDateTime(task.completedAt)}</span>`}
+          </div>
+
+          ${hasTodos && html`
+            <div class="pf-agd-todo-section">
+              <div class="pf-agd-todo-header">
+                <strong>${t('profile.agents.tasks.todoLabel')}</strong>
+                <span class="pf-agd-todo-summary">
+                  ${aimeatSteps > 0 && html`<span class="pf-agd-env-badge pf-agd-env-aimeat">${t('profile.agents.tasks.envAimeat')}: ${aimeatSteps}</span>`}
+                  ${agentSteps > 0 && html`<span class="pf-agd-env-badge pf-agd-env-agent">${t('profile.agents.tasks.envAgent')}: ${agentSteps}</span>`}
+                  ${totalMinutes > 0 && html`<span class="pf-agd-todo-time">~${totalMinutes} ${t('profile.agents.tasks.minuteShort')}</span>`}
+                </span>
+              </div>
+              <div class="pf-agd-todo-list">
+                ${todos.map((td, i) => html`
+                  <div class="pf-agd-todo-item pf-agd-todo-${td.status || 'pending'}" key=${td.id || i}>
+                    <span class="pf-agd-todo-icon">${todoStatusIcon(td.status || 'pending')}</span>
+                    <div class="pf-agd-todo-content">
+                      <div class="pf-agd-todo-title">
+                        ${td.title}
+                        <span class="pf-agd-env-badge pf-agd-env-${td.environment || 'agent'}">${td.environment === 'aimeat' ? t('profile.agents.tasks.envAimeat') : t('profile.agents.tasks.envAgent')}</span>
+                        ${td.estimateMinutes && html`
+                          <span class="pf-agd-todo-est">${td.estimateMinutes} ${t('profile.agents.tasks.minuteShort')}</span>
+                        `}
+                      </div>
+                      ${td.description && html`<div class="pf-agd-todo-desc">${td.description}</div>`}
+                      ${td.environmentReason && html`
+                        <div class="pf-agd-todo-reason">${td.environmentReason}</div>
+                      `}
+                      ${td.verification && html`<div class="pf-agd-todo-verify">${td.verification}</div>`}
+                      ${td.completedAt && html`<div class="pf-agd-todo-completed-at">${formatDateTime(td.completedAt)}</div>`}
+                    </div>
+                  </div>
+                `)}
+              </div>
             </div>
           `}
-          ${loadingEvents && html`<div class="agd-empty">${t('profile.loading')}</div>`}
+
+          ${!hasTodos && isQueued && html`
+            <div class="pf-agd-todo-waiting">
+              ${t('profile.agents.tasks.builder.waitingTodos')}
+            </div>
+          `}
+
+          ${loadingEvents && html`<div class="pf-agd-empty">${t('profile.loading')}</div>`}
           ${events && events.length > 0 && html`
-            <div class="agd-event-log">
+            <div class="pf-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>
+                <div class="pf-agd-event-item" key=${ev.id || ev.timestamp}>
+                  <span class="pf-agd-event-time">${ev.timestamp ? timeAgo(ev.timestamp) : ''}</span>
+                  <span class="pf-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="pf-agd-empty">${t('profile.agents.tasks.noEventsRecorded')}</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>
+
+          <div class="pf-agd-task-actions">
+            ${canStart && html`
+              <button class="btn-primary btn-sm" onClick=${handleStart} disabled=${starting}>
+                ${starting ? t('profile.agents.tasks.starting') : t('profile.agents.tasks.startThisTask')}
+              </button>
+            `}
+            ${(isQueued || task.status === 'draft') && html`
+              <button class="btn-danger btn-sm" onClick=${handleDelete}>${t('profile.agents.tasks.delete')}</button>
+            `}
           </div>
         </div>
       `}
@@ -103,69 +217,11 @@ function TaskItem({ task, agentName, showToast }) {
   `;
 }
 
-function TaskCreateForm({ agentName, showToast, onCreated, onCancel }) {
-  const [title, setTitle] = useState('');
-  const [description, setDescription] = useState('');
-  const [status, setStatus] = useState('queued');
-  const [saving, setSaving] = useState(false);
-
-  async function handleSubmit(e) {
-    e.preventDefault();
-    if (!title.trim()) return;
-    setSaving(true);
-    try {
-      await createTask(agentName, {
-        title: title.trim(),
-        description: description.trim() || undefined,
-        status,
-      });
-      const msg = t('profile.agents.tasks.created');
-      showToast(msg !== 'profile.agents.tasks.created' ? msg : 'Task created');
-      onCreated();
-    } catch (err) {
-      showToast(err.message || 'Failed to create task', true);
-    }
-    setSaving(false);
-  }
-
-  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>
-        <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 />
-      </div>
-      <div class="agd-form-field">
-        <label>${t('profile.agents.tasks.descriptionLabel') !== 'profile.agents.tasks.descriptionLabel' ? t('profile.agents.tasks.descriptionLabel') : '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>
-      </div>
-      <div class="agd-form-field">
-        <label>${t('profile.agents.tasks.initialStatus') !== 'profile.agents.tasks.initialStatus' ? t('profile.agents.tasks.initialStatus') : 'Initial status'}</label>
-        <select value=${status} onChange=${(e) => setStatus(e.target.value)}>
-          <option value="draft">${statusLabel('draft')}</option>
-          <option value="queued">${statusLabel('queued')}</option>
-        </select>
-      </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')}
-        </button>
-      </div>
-    </form>
-  `;
-}
-
 export default function AgentTasksSubtab({ agentName, session, showToast }) {
   const [tasks, setTasks] = useState(null);
   const [showCreate, setShowCreate] = useState(false);
   const [error, setError] = useState(null);
+  const [filter, setFilter] = useState('all');
 
   async function loadTasks() {
     try {
@@ -178,11 +234,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(() => {
@@ -197,57 +250,50 @@ export default function AgentTasksSubtab({ agentName, session, showToast }) {
   }
 
   if (tasks === null) {
-    return html`<div class="agd-empty">${t('profile.loading')}</div>`;
+    return html`<div class="pf-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');
+  const filtered = filter === 'all' ? tasks : tasks.filter(task => {
+    switch (filter) {
+      case 'active': return task.status === 'active';
+      case 'queued': return task.status === 'queued' || task.status === 'draft';
+      case 'completed': return task.status === 'done';
+      case 'failed': return task.status === 'failed' || task.status === 'stalled';
+      default: return true;
+    }
+  });
 
   return html`
     <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})`}
+      <div class="pf-agd-section-header">
+        <span class="pf-agd-section-title">
+          ${t('profile.agents.tasks.title')}${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 ? '-' : '+'} ${t('profile.agents.tasks.newTask')}
         </button>
       </div>
 
       ${showCreate && html`
-        <${TaskCreateForm} agentName=${agentName} showToast=${showToast} onCreated=${handleCreated} onCancel=${() => setShowCreate(false)} />
-      `}
-
-      ${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} />`)}
+        <${TaskCreationBuilder} agentName=${agentName} session=${session} showToast=${showToast} onClose=${handleCreated} />
       `}
 
-      ${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} />`)}
-      `}
+      ${error && html`<div class="pf-agd-empty">${error}</div>`}
 
-      ${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="pf-agd-filter-bar">
+        ${TASK_FILTERS.map(f => html`
+          <button key=${f}
+                  class="pf-agd-filter-pill ${filter === f ? 'pf-agd-filter-pill--active' : ''}"
+                  onClick=${() => setFilter(f)}>
+            ${t(`profile.agents.detail.tasks.filter.${f}`)}
+          </button>
+        `)}
+      </div>
 
-      ${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>
+      ${filtered.length > 0 ? filtered.map(task => html`
+        <${TaskItem} key=${task.id} task=${task} agentName=${agentName} showToast=${showToast} onRefresh=${loadTasks} />
+      `) : html`
+        <div class="pf-agd-empty">${t('profile.agents.detail.empty.tasks')}</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) {