trackops 2.0.5 → 2.1.0

package/ui/js/views/scrum.js

@@ -278,11 +278,16 @@ function _renderCard(task, phases) {
       <div style="display:flex;justify-content:space-between;align-items:start;gap:var(--space-2, 0.5rem)">
         <span class="scrum-card-title" style="font-size:var(--text-sm, 0.875rem);font-weight:500;color:var(--text-primary);line-height:1.3">${esc(task.title)}</span>
         <span class="badge badge-${priorityVariant[task.priority] || 'muted'}" style="flex-shrink:0">${esc(task.priority)}</span>
-      </div>
-      <div class="scrum-card-meta" style="display:flex;flex-wrap:wrap;gap:var(--space-1, 0.25rem);margin-top:var(--space-2, 0.5rem)">
-        <span class="badge badge-muted">${esc(phaseInfo?.label || task.phase)}</span>
-        ${isBlocked ? `<span class="badge badge-danger">${icon('alertTriangle', 10)} Blocked</span>` : ''}
-      </div>
+      </div>
+      <div class="scrum-card-meta" style="display:flex;flex-wrap:wrap;gap:var(--space-1, 0.25rem);margin-top:var(--space-2, 0.5rem)">
+        <span class="badge badge-muted">${esc(phaseInfo?.label || task.phase)}</span>
+        ${task.executionOwner ? `<span class="badge badge-muted">${esc(`exec:${task.executionOwner}`)}</span>` : ''}
+        ${task.sourceId ? `<span class="badge badge-muted">${esc(`plan:${task.sourceId}`)}</span>` : ''}
+        ${task.rootId && task.rootId !== task.id ? `<span class="badge badge-muted">${esc(`root:${task.rootTitle}`)}</span>` : ''}
+        ${task.awaitingUserConfirmation ? `<span class="badge badge-warning">${t('ui.tasks.awaitingUser', {}, 'Awaiting user')}</span>` : ''}
+        ${task.verificationPending ? `<span class="badge badge-accent">${t('ui.tasks.verifyPending', {}, 'Verify state')}</span>` : ''}
+        ${isBlocked ? `<span class="badge badge-danger">${icon('alertTriangle', 10)} Blocked</span>` : ''}
+      </div>
     </div>
   `;
 }
@@ -309,10 +314,13 @@ function _renderBacklog(pendingTasks, phases) {
       <div class="scrum-backlog-item" data-task-id="${esc(task.id)}" draggable="true"
            style="display:flex;align-items:center;gap:var(--space-3, 0.75rem);padding:var(--space-2, 0.5rem) var(--space-3, 0.75rem);border-radius:var(--radius-sm, 4px);border:1px solid var(--border, rgba(255,255,255,0.08));cursor:grab"
            role="listitem" tabindex="0">
-        <span style="flex:1;font-size:var(--text-sm, 0.875rem);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(task.title)}</span>
-        <span class="badge badge-${priorityVariant[task.priority] || 'muted'}" style="flex-shrink:0">${esc(task.priority)}</span>
-        ${phaseInfo ? `<span class="badge badge-muted" style="flex-shrink:0">${esc(phaseInfo.label)}</span>` : ''}
-      </div>
+        <span style="flex:1;font-size:var(--text-sm, 0.875rem);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(task.title)}</span>
+        <span class="badge badge-${priorityVariant[task.priority] || 'muted'}" style="flex-shrink:0">${esc(task.priority)}</span>
+        ${phaseInfo ? `<span class="badge badge-muted" style="flex-shrink:0">${esc(phaseInfo.label)}</span>` : ''}
+        ${task.executionOwner ? `<span class="badge badge-muted">${esc(`exec:${task.executionOwner}`)}</span>` : ''}
+        ${task.sourceId ? `<span class="badge badge-muted">${esc(`plan:${task.sourceId}`)}</span>` : ''}
+        ${task.rootId && task.rootId !== task.id ? `<span class="badge badge-muted">${esc(`root:${task.rootTitle}`)}</span>` : ''}
+      </div>
     `;
   }).join('');
 
@@ -460,10 +468,14 @@ function _bindDragDrop(board, columnSelector) {
     const targetStatuses = SCRUM_COLUMNS.find(c => c.id === scrumStatus)?.statuses || [];
     if (targetStatuses.includes(task.status)) return; // already there
 
-    try {
-      await api.taskAction(taskId, action,
-        t('ui.scrum.movedFromBoard', { status: scrumStatus }, `Moved to ${scrumStatus} from sprint board.`)
-      );
+    try {
+      await api.taskAction(taskId, action,
+        t('ui.scrum.movedFromBoard', { status: scrumStatus }, `Moved to ${scrumStatus} from sprint board.`),
+        {
+          actor: 'user',
+          source: 'scrum',
+        }
+      );
       flash(
         t('ui.scrum.movedSuccess', { status: scrumStatus }, `Task moved to ${scrumStatus}.`),
         'success'

package/ui/js/views/sidebar.js

@@ -11,14 +11,15 @@ import * as consoleLogger from '../console-logger.js';
 import * as onboarding from '../onboarding.js';
 import { t } from '../i18n.js';
 
-const NAV_ITEMS = [
-  { id: 'projects',   label: 'Projects',   icon: 'folder' },
-  { id: 'dashboard',  label: 'Dashboard',  icon: 'dashboard' },
-  { id: 'tasks',      label: 'Tasks',      icon: 'tasks',    badge: true },
-  { id: 'timeline',   label: 'Timeline',   icon: 'timeline' },
-  { id: 'terminal',   label: 'Terminal',   icon: 'terminal2' },
-  { id: 'settings',   label: 'Settings',   icon: 'settings' },
-];
+const NAV_ITEMS = [
+  { id: 'projects',   label: 'Projects',   icon: 'folder' },
+  { id: 'dashboard',  label: 'Dashboard',  icon: 'dashboard' },
+  { id: 'plans',      label: 'Plans',      icon: 'fileText' },
+  { id: 'tasks',      label: 'Tasks',      icon: 'tasks',    badge: true },
+  { id: 'timeline',   label: 'Timeline',   icon: 'timeline' },
+  { id: 'terminal',   label: 'Terminal',   icon: 'terminal2' },
+  { id: 'settings',   label: 'Settings',   icon: 'settings' },
+];
 
 const FOOTER_ITEMS = [
   { id: 'help',    label: 'Help & Tour',  icon: 'help',    action: 'tour' },

package/ui/js/views/tasks.js

@@ -19,7 +19,12 @@ import * as timeTracker from '../time-tracker.js';
 
 /* ─────────────────────────── Mode state ─────────────────────────── */
 
-let _activeMode = localStorage.getItem('ops-tasks-mode') || 'kanban';
+let _activeMode = localStorage.getItem('ops-tasks-mode') || 'kanban';
+let _collapsedNodes = new Set(JSON.parse(sessionStorage.getItem('ops-task-collapsed') || '[]'));
+
+function _persistCollapsed() {
+  sessionStorage.setItem('ops-task-collapsed', JSON.stringify([..._collapsedNodes]));
+}
 
 /* ─────────────────────────── Public API ─────────────────────────── */
 
@@ -28,13 +33,15 @@ export async function render() {
   if (!payload) return `<div class="empty-state" style="margin:3rem">${t('ui.tasks.noData', {}, 'No project data.')}</div>`;
 
   const projectName = payload.control?.project?.name || payload.control?.name || '';
-  const activeFilters = filters.load('tasks');
-  const allTasks = payload.derived?.tasks || [];
-  const filteredTasks = filters.apply(allTasks, activeFilters);
-  const phases = state.getPhases();
-  const streams = [...new Set(allTasks.map(t => t.stream).filter(Boolean))];
-
-  const modeContent = _renderModeContent(filteredTasks, phases, payload);
+  const activeFilters = filters.load('tasks');
+  const allTasks = payload.derived?.tasks || [];
+  const filteredTasks = filters.apply(allTasks, activeFilters);
+  const phases = state.getPhases();
+  const streams = [...new Set(allTasks.map(t => t.stream).filter(Boolean))];
+  const sources = [...new Set(allTasks.map(t => t.sourceId || t.origin?.sourceId).filter(Boolean))];
+  const roots = allTasks.filter(t => t.rootId === t.id).map(t => ({ id: t.id, title: t.title }));
+
+  const modeContent = _renderModeContent(filteredTasks, phases, payload);
 
   return `
     <section class="view-section view-enter">
@@ -53,11 +60,11 @@ export async function render() {
             ${icon('plus', 14)} ${t('ui.tasks.new', {}, 'New task')}
           </button>
         </div>
-      </div>
-
-      <div id="tasks-filter-bar">
-        ${filters.renderBar('tasks', activeFilters, { phases, streams })}
-      </div>
+      </div>
+
+      <div id="tasks-filter-bar">
+        ${filters.renderBar('tasks', activeFilters, { phases, streams, sources, roots })}
+      </div>
 
       <div id="tasks-mode-content">
         ${modeContent}
@@ -128,12 +135,21 @@ function _refreshModeContent() {
   const payload = state.getPayload();
   if (!payload) return;
 
-  const activeFilters = filters.load('tasks');
-  const allTasks = payload.derived?.tasks || [];
-  const filteredTasks = filters.apply(allTasks, activeFilters);
-  const phases = state.getPhases();
-
-  const container = document.getElementById('tasks-mode-content');
+  const activeFilters = filters.load('tasks');
+  const allTasks = payload.derived?.tasks || [];
+  const filteredTasks = filters.apply(allTasks, activeFilters);
+  const phases = state.getPhases();
+  const streams = [...new Set(allTasks.map(t => t.stream).filter(Boolean))];
+  const sources = [...new Set(allTasks.map(t => t.sourceId || t.origin?.sourceId).filter(Boolean))];
+  const roots = allTasks.filter(t => t.rootId === t.id).map(t => ({ id: t.id, title: t.title }));
+
+  const filterBar = document.getElementById('tasks-filter-bar');
+  if (filterBar) {
+    filterBar.innerHTML = filters.renderBar('tasks', activeFilters, { phases, streams, sources, roots });
+    filters.bindBar('tasks', () => _refreshModeContent());
+  }
+
+  const container = document.getElementById('tasks-mode-content');
   if (container) {
     container.innerHTML = _renderModeContent(filteredTasks, phases, payload);
   }
@@ -212,39 +228,70 @@ function _renderStatusFilters(statusLabels, totals) {
 
 /* ─── Task list cards ─── */
 
-function _renderTaskList(tasks, statusLabels, phases) {
-  if (!tasks.length) return `<div class="empty-state">${t('ui.tasks.noMatch', {}, 'No matching tasks.')}</div>`;
-  const selectedId = state.get('selectedTaskId');
-  const priorityVariant = { P0: 'danger', P1: 'warning', P2: 'accent', P3: 'muted' };
-
-  return tasks.map(tk => {
-    const phase = phases.find(p => p.id === tk.phase);
-    return `
-      <div class="task-card ${tk.id === selectedId ? 'is-selected' : ''}"
-        data-task-id="${esc(tk.id)}"
-        role="listitem" tabindex="0"
-        aria-selected="${tk.id === selectedId}"
-        aria-label="${esc(tk.title)}"
-      >
-        <strong class="task-card-title">${esc(tk.title)}</strong>
-        <span class="task-card-id">${esc(tk.id)}</span>
-        <div class="task-card-meta" style="margin-top:var(--space-2)">
-          <span class="badge badge-${priorityVariant[tk.priority] || 'muted'}">${esc(tk.priority)}</span>
-          <span class="badge status-${tk.status}">${esc(statusLabels[tk.status] || tk.status)}</span>
-          ${phase ? `<span class="badge badge-muted">${esc(phase.label)}</span>` : ''}
-        </div>
-      </div>
-    `;
-  }).join('');
-}
+function _renderTaskList(tasks, statusLabels, phases) {
+  if (!tasks.length) return `<div class="empty-state">${t('ui.tasks.noMatch', {}, 'No matching tasks.')}</div>`;
+  const selectedId = state.get('selectedTaskId');
+  const priorityVariant = { P0: 'danger', P1: 'warning', P2: 'accent', P3: 'muted' };
+  const visibleTasks = tasks.filter(tk => {
+    let currentParentId = tk.parentId;
+    while (currentParentId) {
+      if (_collapsedNodes.has(currentParentId)) return false;
+      const parent = tasks.find(entry => entry.id === currentParentId);
+      currentParentId = parent?.parentId || null;
+    }
+    return true;
+  });
+
+  return visibleTasks.map(tk => {
+    const phase = phases.find(p => p.id === tk.phase);
+    const isCollapsed = _collapsedNodes.has(tk.id);
+    const indent = (tk.depth || 0) * 18;
+    return `
+      <div class="task-card ${tk.id === selectedId ? 'is-selected' : ''}"
+        data-task-id="${esc(tk.id)}"
+        role="listitem" tabindex="0"
+        aria-selected="${tk.id === selectedId}"
+        aria-label="${esc(tk.title)}"
+        style="padding-left:calc(var(--space-4) + ${indent}px)"
+      >
+        <div style="display:flex;align-items:flex-start;gap:var(--space-2)">
+          ${tk.isParent ? `
+            <button class="btn btn-ghost btn-sm" type="button" data-task-toggle="${esc(tk.id)}" aria-label="${isCollapsed ? 'Expand children' : 'Collapse children'}" style="padding:0;min-width:auto">
+              ${icon(isCollapsed ? 'arrowRight' : 'chevronDown', 14)}
+            </button>
+          ` : `<span style="width:14px;display:inline-block"></span>`}
+          <strong class="task-card-title">${esc(tk.title)}</strong>
+        </div>
+        <span class="task-card-id">${esc(tk.id)}</span>
+        <div class="task-card-meta" style="margin-top:var(--space-2)">
+          <span class="badge badge-${priorityVariant[tk.priority] || 'muted'}">${esc(tk.priority)}</span>
+          <span class="badge status-${tk.status}">${esc(statusLabels[tk.status] || tk.status)}</span>
+          ${phase ? `<span class="badge badge-muted">${esc(phase.label)}</span>` : ''}
+          ${tk.executionOwner ? `<span class="badge badge-muted">${esc(`exec:${tk.executionOwner}`)}</span>` : ''}
+          ${tk.sourceId ? `<span class="badge badge-muted">${esc(`plan:${tk.sourceId}`)}</span>` : ''}
+          ${tk.rootId && tk.rootId !== tk.id ? `<span class="badge badge-muted">${esc(`root:${tk.rootTitle}`)}</span>` : ''}
+          ${tk.awaitingUserConfirmation ? `<span class="badge badge-warning">${t('ui.tasks.awaitingUser', {}, 'Awaiting user')}</span>` : ''}
+          ${tk.verificationPending ? `<span class="badge badge-accent">${t('ui.tasks.verifyPending', {}, 'Verify state')}</span>` : ''}
+          ${tk.detached ? `<span class="badge badge-danger">${t('ui.tasks.detached', {}, 'Detached')}</span>` : ''}
+          ${tk.isParent ? `<span class="badge badge-muted">${esc(`${tk.childrenCount} child${tk.childrenCount === 1 ? '' : 'ren'}`)}</span>` : ''}
+        </div>
+      </div>
+    `;
+  }).join('');
+}
 
 /* ─── Task editor ─── */
 
-function _renderEditor(task, phases) {
-  const isNew = !task;
-  const phasesOpts = phases.map(p =>
-    `<option value="${esc(p.id)}" ${!isNew && task.phase === p.id ? 'selected' : ''}>${esc(p.id)} — ${esc(p.label)}</option>`
-  ).join('');
+function _renderEditor(task, phases) {
+  const isNew = !task;
+  const allTasks = state.getPayload()?.derived?.tasks || [];
+  const parentOptions = allTasks
+    .filter(candidate => !task || candidate.id !== task.id)
+    .map(candidate => `<option value="${esc(candidate.id)}" ${!isNew && task.parentId === candidate.id ? 'selected' : ''}>${esc(candidate.title)} (${esc(candidate.id)})</option>`)
+    .join('');
+  const phasesOpts = phases.map(p =>
+    `<option value="${esc(p.id)}" ${!isNew && task.phase === p.id ? 'selected' : ''}>${esc(p.id)} — ${esc(p.label)}</option>`
+  ).join('');
 
   const statuses = [
     { id: 'pending',     label: t('status.pending',     {}, 'Pending') },
@@ -260,32 +307,32 @@ function _renderEditor(task, phases) {
       <div class="panel-header-left">
         <p class="eyebrow">Task Studio</p>
         <h3 class="panel-title" id="editor-title">${isNew ? t('ui.tasks.new', {}, 'New task') : esc(task.title)}</h3>
-      </div>
-      <div class="panel-header-right">
-        ${!isNew ? `
-          <button class="btn btn-ghost btn-sm" id="timer-quick-btn" type="button" title="${t('ui.tasks.timerTitle', {}, 'Start timer for this task')}">
-            ${icon('timer', 14)} Timer
-          </button>
-          <button class="btn btn-ghost btn-sm" id="duplicate-btn" type="button" aria-label="${t('ui.tasks.duplicate', {}, 'Duplicate task')}">
-            ${icon('copy', 14)}
-          </button>
+      </div>
+      <div class="panel-header-right">
+        ${!isNew ? `
+          <button class="btn btn-ghost btn-sm" id="timer-quick-btn" type="button" ${task.isParent ? 'disabled' : ''} title="${task.isParent ? t('ui.tasks.parentTimerHint', {}, 'Track time on leaf tasks only.') : t('ui.tasks.timerTitle', {}, 'Start timer for this task')}">
+            ${icon('timer', 14)} Timer
+          </button>
+          <button class="btn btn-ghost btn-sm" id="duplicate-btn" type="button" aria-label="${t('ui.tasks.duplicate', {}, 'Duplicate task')}">
+            ${icon('copy', 14)}
+          </button>
         ` : ''}
         <button class="btn btn-ghost btn-sm" id="clear-task-btn" type="button" aria-label="${t('ui.tasks.clear', {}, 'Clear form')}">
           ${icon('x', 14)}
         </button>
       </div>
     </div>
-
-    <!-- Quick action strip -->
-    ${!isNew ? `
-      <div class="panel-footer" style="display:flex;gap:var(--space-2);flex-wrap:wrap" role="group" aria-label="${t('ui.tasks.quickActions', {}, 'Quick task actions')}">
-        <button class="chip is-active" type="button" data-task-action="start" aria-label="${t('ui.tasks.start', {}, 'Start task')}">${t('ui.tasks.startLabel', {}, 'Start')}</button>
-        <button class="chip" type="button" data-task-action="review" aria-label="${t('ui.tasks.review', {}, 'Send to review')}">${t('ui.tasks.reviewLabel', {}, 'Review')}</button>
-        <button class="chip" type="button" data-task-action="complete" aria-label="${t('ui.tasks.complete', {}, 'Complete task')}">${t('ui.tasks.completeLabel', {}, 'Complete')}</button>
-        <button class="chip" type="button" data-task-action="block" aria-label="${t('ui.tasks.block', {}, 'Block task')}">${t('ui.tasks.blockLabel', {}, 'Block')}</button>
-        <button class="chip" type="button" data-task-action="pending" aria-label="${t('ui.tasks.pending', {}, 'Return to pending')}">${t('status.pending', {}, 'Pending')}</button>
-      </div>
-    ` : ''}
+
+    <!-- Quick action strip -->
+    ${!isNew ? `
+      <div class="panel-footer" style="display:flex;gap:var(--space-2);flex-wrap:wrap" role="group" aria-label="${t('ui.tasks.quickActions', {}, 'Quick task actions')}">
+        <button class="chip is-active" type="button" data-task-action="start" ${task.isParent ? 'disabled' : ''} aria-label="${t('ui.tasks.start', {}, 'Start task')}">${t('ui.tasks.startLabel', {}, 'Start')}</button>
+        <button class="chip" type="button" data-task-action="review" ${task.isParent ? 'disabled' : ''} aria-label="${t('ui.tasks.review', {}, 'Send to review')}">${t('ui.tasks.reviewLabel', {}, 'Review')}</button>
+        <button class="chip" type="button" data-task-action="complete" ${task.isParent ? 'disabled' : ''} aria-label="${t('ui.tasks.complete', {}, 'Complete task')}">${t('ui.tasks.completeLabel', {}, 'Complete')}</button>
+        <button class="chip" type="button" data-task-action="block" ${task.isParent ? 'disabled' : ''} aria-label="${t('ui.tasks.block', {}, 'Block task')}">${t('ui.tasks.blockLabel', {}, 'Block')}</button>
+        <button class="chip" type="button" data-task-action="pending" ${task.isParent ? 'disabled' : ''} aria-label="${t('ui.tasks.pending', {}, 'Return to pending')}">${t('status.pending', {}, 'Pending')}</button>
+      </div>
+    ` : ''}
 
     <div class="panel-body">
       <form id="task-form" class="stack stack-md" novalidate>
@@ -312,29 +359,55 @@ function _renderEditor(task, phases) {
         </div>
 
         <div class="field-row">
-          <div class="field">
-            <label for="task-status">${t('ui.tasks.field.status', {}, 'Status')}</label>
-            <select id="task-status" name="status">
-              ${statuses.map(s => `<option value="${s.id}" ${!isNew && task.status === s.id ? 'selected' : ''}>${s.label}</option>`).join('')}
-            </select>
-          </div>
-          <div class="field">
-            <label for="task-stream">${t('ui.tasks.field.stream', {}, 'Stream')}</label>
-            <input id="task-stream" name="stream" type="text"
-              value="${isNew ? 'Operations' : esc(task.stream || '')}"
+          <div class="field">
+            <label for="task-status">${t('ui.tasks.field.status', {}, 'Status')}</label>
+            <select id="task-status" name="status" ${!isNew && task.isParent ? 'disabled' : ''}>
+              ${statuses.map(s => `<option value="${s.id}" ${!isNew && task.status === s.id ? 'selected' : ''}>${s.label}</option>`).join('')}
+            </select>
+            ${!isNew && task.isParent ? `<p style="font-size:var(--text-xs);color:var(--text-secondary);margin-top:var(--space-1)">${t('ui.tasks.parentStatusHint', {}, 'Parent status is rolled up from its leaf tasks.')}</p>` : ''}
+          </div>
+          <div class="field">
+            <label for="task-stream">${t('ui.tasks.field.stream', {}, 'Stream')}</label>
+            <input id="task-stream" name="stream" type="text"
+              value="${isNew ? 'Operations' : esc(task.stream || '')}"
               placeholder="Operations" />
           </div>
         </div>
 
-        <div class="checkbox-field">
-          <input id="task-required" type="checkbox" name="required" ${isNew || task.required !== false ? 'checked' : ''} />
-          <label for="task-required">${t('ui.tasks.field.required', {}, 'Required for delivery')}</label>
-        </div>
-
-        <div class="field">
-          <label for="task-summary">${t('ui.tasks.field.summary', {}, 'Summary')}</label>
-          <textarea id="task-summary" name="summary" rows="3"
-            placeholder="${t('ui.tasks.placeholder.summary', {}, 'Short description of the task')}">${isNew ? '' : esc(task.summary || '')}</textarea>
+        <div class="checkbox-field">
+          <input id="task-required" type="checkbox" name="required" ${isNew || task.required !== false ? 'checked' : ''} />
+          <label for="task-required">${t('ui.tasks.field.required', {}, 'Required for delivery')}</label>
+        </div>
+
+        <div class="field">
+          <label for="task-execution-owner">${t('ui.tasks.field.executionOwner', {}, 'Execution owner')}</label>
+          <select id="task-execution-owner" name="executionOwner">
+            ${[
+              { id: 'shared', label: t('ui.tasks.execution.shared', {}, 'Shared') },
+              { id: 'agent', label: t('ui.tasks.execution.agent', {}, 'Agent') },
+              { id: 'user', label: t('ui.tasks.execution.user', {}, 'User') },
+            ].map(option => `<option value="${option.id}" ${(!isNew ? (task.executionOwner || task.execution?.owner || 'shared') : 'shared') === option.id ? 'selected' : ''}>${esc(option.label)}</option>`).join('')}
+          </select>
+        </div>
+
+        <div class="field-row">
+          <div class="field">
+            <label for="task-parent">${t('ui.tasks.field.parent', {}, 'Parent')}</label>
+            <select id="task-parent" name="parentId">
+              <option value="">${t('ui.tasks.none', {}, 'None')}</option>
+              ${parentOptions}
+            </select>
+          </div>
+          <div class="field">
+            <label for="task-sequence">${t('ui.tasks.field.sequence', {}, 'Sequence')}</label>
+            <input id="task-sequence" name="sequence" type="number" step="10" value="${isNew ? '' : esc(task.sequence ?? '')}" placeholder="10" />
+          </div>
+        </div>
+
+        <div class="field">
+          <label for="task-summary">${t('ui.tasks.field.summary', {}, 'Summary')}</label>
+          <textarea id="task-summary" name="summary" rows="3"
+            placeholder="${t('ui.tasks.placeholder.summary', {}, 'Short description of the task')}">${isNew ? '' : esc(task.summary || '')}</textarea>
         </div>
 
         <div class="field">
@@ -361,16 +434,30 @@ function _renderEditor(task, phases) {
             placeholder="${t('ui.tasks.placeholder.note', {}, 'Optional note to append to history')}"></textarea>
         </div>
 
-        <div class="form-actions">
-          <button class="btn btn-primary" type="submit" id="save-task-btn">
-            ${icon('check', 16)} ${isNew ? t('ui.tasks.create', {}, 'Create task') : t('ui.tasks.save', {}, 'Save changes')}
-          </button>
-        </div>
-
-      </form>
-
-      ${!isNew && task.history?.length ? `
-        <div style="margin-top:var(--space-6)">
+        <div class="form-actions">
+          <button class="btn btn-primary" type="submit" id="save-task-btn">
+            ${icon('check', 16)} ${isNew ? t('ui.tasks.create', {}, 'Create task') : t('ui.tasks.save', {}, 'Save changes')}
+          </button>
+        </div>
+
+      </form>
+
+      ${!isNew ? `
+        <div class="panel" style="margin-top:var(--space-4)">
+          <p class="eyebrow">${t('ui.tasks.traceability', {}, 'Traceability')}</p>
+          <div class="stack stack-sm">
+            <div class="info-row"><p class="label-sm">Origin</p><p class="value">${esc(task.origin?.kind || 'manual')}</p></div>
+            <div class="info-row"><p class="label-sm">Source</p><p class="value">${esc(task.sourceId || task.origin?.sourceId || 'manual')}</p></div>
+            <div class="info-row"><p class="label-sm">Detached</p><p class="value">${task.detached ? 'yes' : 'no'}</p></div>
+            <div class="info-row"><p class="label-sm">Execution</p><p class="value">${esc(task.executionOwner || task.execution?.owner || 'shared')}</p></div>
+            <div class="info-row"><p class="label-sm">Awaiting user</p><p class="value">${task.awaitingUserConfirmation ? 'yes' : 'no'}</p></div>
+            <div class="info-row"><p class="label-sm">Verify state</p><p class="value">${task.verificationPending ? 'yes' : 'no'}</p></div>
+          </div>
+        </div>
+      ` : ''}
+
+      ${!isNew && task.history?.length ? `
+        <div style="margin-top:var(--space-6)">
           <p class="eyebrow" style="margin-bottom:var(--space-3)">${t('ui.tasks.history', {}, 'History')}</p>
           <div class="stack stack-sm">
             ${task.history.slice(-5).reverse().map(h => `
@@ -388,11 +475,22 @@ function _renderEditor(task, phases) {
 
 /* ─── List mode event binding ─── */
 
-function _bindListEvents() {
-  // Select task from list
-  document.getElementById('task-list')?.addEventListener('click', e => {
-    const card = e.target.closest('[data-task-id]');
-    if (!card) return;
+function _bindListEvents() {
+  document.querySelectorAll('[data-task-toggle]').forEach(button => {
+    button.addEventListener('click', event => {
+      event.stopPropagation();
+      const taskId = button.dataset.taskToggle;
+      if (_collapsedNodes.has(taskId)) _collapsedNodes.delete(taskId);
+      else _collapsedNodes.add(taskId);
+      _persistCollapsed();
+      _refreshModeContent();
+    });
+  });
+
+  // Select task from list
+  document.getElementById('task-list')?.addEventListener('click', e => {
+    const card = e.target.closest('[data-task-id]');
+    if (!card) return;
     const id = card.dataset.taskId;
     state.update('selectedTaskId', id);
     const editor = document.getElementById('task-editor');
@@ -455,17 +553,20 @@ function _bindEditorForm() {
   // Quick action strip
   document.querySelectorAll('[data-task-action]').forEach(btn => {
     btn.addEventListener('click', async () => {
-      const taskId = state.get('selectedTaskId');
-      if (!taskId) { flash(t('ui.tasks.selectFirst', {}, 'Select a task first.'), 'warning'); return; }
-      const action = btn.dataset.taskAction;
-      const note = document.getElementById('task-note')?.value?.trim() || '';
-      try {
-        await api.taskAction(taskId, action, note || t('ui.tasks.defaultActionNote', { action }, `Change to "${action}" from the board.`));
-        flash(t('ui.tasks.updated', {}, 'Status updated.'), 'success');
-        window.dispatchEvent(new CustomEvent('ops:refresh'));
-      } catch (err) {
-        flash(err.message, 'error');
-      }
+      const taskId = state.get('selectedTaskId');
+      if (!taskId) { flash(t('ui.tasks.selectFirst', {}, 'Select a task first.'), 'warning'); return; }
+      const action = btn.dataset.taskAction;
+      const note = document.getElementById('task-note')?.value?.trim() || '';
+      try {
+        await api.taskAction(taskId, action, note || t('ui.tasks.defaultActionNote', { action }, `Change to "${action}" from the board.`), {
+          actor: 'user',
+          source: 'tasks_view',
+        });
+        flash(t('ui.tasks.updated', {}, 'Status updated.'), 'success');
+        window.dispatchEvent(new CustomEvent('ops:refresh'));
+      } catch (err) {
+        flash(err.message, 'error');
+      }
     });
   });
 
@@ -486,18 +587,21 @@ function _bindEditorForm() {
 async function _submitForm() {
   const get = id => document.getElementById(id);
 
-  const payload = {
-    title:      get('task-title')?.value.trim(),
-    phase:      get('task-phase')?.value,
-    priority:   get('task-priority')?.value,
-    status:     get('task-status')?.value,
-    stream:     get('task-stream')?.value.trim(),
-    required:   get('task-required')?.checked,
-    summary:    get('task-summary')?.value.trim(),
-    acceptance: splitLines(get('task-acceptance')?.value || ''),
-    dependsOn:  splitLines(get('task-depends')?.value || ''),
-    blocker:    get('task-blocker')?.value.trim(),
-    note:       get('task-note')?.value.trim(),
+  const payload = {
+    title:      get('task-title')?.value.trim(),
+    phase:      get('task-phase')?.value,
+    priority:   get('task-priority')?.value,
+    status:     get('task-status')?.value,
+    stream:     get('task-stream')?.value.trim(),
+    required:   get('task-required')?.checked,
+    executionOwner: get('task-execution-owner')?.value || 'shared',
+    parentId:   get('task-parent')?.value || '',
+    sequence:   get('task-sequence')?.value || '',
+    summary:    get('task-summary')?.value.trim(),
+    acceptance: splitLines(get('task-acceptance')?.value || ''),
+    dependsOn:  splitLines(get('task-depends')?.value || ''),
+    blocker:    get('task-blocker')?.value.trim(),
+    note:       get('task-note')?.value.trim(),
   };
 
   if (!payload.title) {
@@ -508,14 +612,14 @@ async function _submitForm() {
 
   const selectedId = state.get('selectedTaskId');
   try {
-    if (selectedId) {
-      await api.updateTask(selectedId, payload);
-      flash(t('ui.tasks.taskUpdated', {}, 'Task updated.'), 'success');
-    } else {
-      const result = await api.createTask(payload);
-      state.update('selectedTaskId', result.task?.id);
-      flash(t('ui.tasks.taskCreated', {}, 'Task created.'), 'success');
-    }
+    if (selectedId) {
+      await api.updateTask(selectedId, payload, { actor: 'user', source: 'tasks_editor' });
+      flash(t('ui.tasks.taskUpdated', {}, 'Task updated.'), 'success');
+    } else {
+      const result = await api.createTask({ ...payload, actor: 'user', source: 'tasks_editor' });
+      state.update('selectedTaskId', result.task?.id);
+      flash(t('ui.tasks.taskCreated', {}, 'Task created.'), 'success');
+    }
     window.dispatchEvent(new CustomEvent('ops:refresh'));
   } catch (err) {
     flash(err.message, 'error');