create-walle 0.9.0 → 0.9.3

package/template/claude-task-manager/public/js/walle.js

@@ -1016,7 +1016,7 @@ function renderChatUI() {
         if (i + 1 < chatHistory.length && chatHistory[i + 1].role === 'assistant') {
           i++;
           html += '<div class="walle-chat-msg assistant">';
-          html += '<div class="walle-chat-msg-role assistant">WALL-E</div>';
+          html += '<div class="walle-chat-msg-role assistant"><img src="/walle-icon.svg" width="16" height="16" class="walle-avatar"> WALL-E</div>';
           html += '<div class="walle-chat-msg-text we-markdown">' + renderMarkdown(chatHistory[i].text) + '</div>';
           html += '</div>';
         }
@@ -1030,7 +1030,7 @@ function renderChatUI() {
           html += '<div class="we-turn-checkbox">' + (isSelSA ? '&#9745;' : '&#9744;') + '</div>';
         }
         html += '<div class="walle-chat-msg assistant">';
-        html += '<div class="walle-chat-msg-role assistant">WALL-E</div>';
+        html += '<div class="walle-chat-msg-role assistant"><img src="/walle-icon.svg" width="16" height="16" class="walle-avatar"> WALL-E</div>';
         html += '<div class="walle-chat-msg-text we-markdown">' + renderMarkdown(msg.text) + '</div>';
         html += '</div>';
         html += '</div>';
@@ -1843,6 +1843,10 @@ function _highlightSearchTerms(html, query) {
 }
 
 // ---- Tasks View ----
+var _taskViewTab = 'active'; // active | inbox | automation | done | all
+var _expandedTasks = new Set(); // track which task cards are expanded
+var _collapsedGroups = new Set(); // track which groups user explicitly collapsed
+var _expandedGroups = new Set(); // track which groups user explicitly expanded
 var _taskFilter = { search: '', statusSet: new Set(), type: 'all' }; // empty statusSet = all
 
 WE.renderTasks = function() {
@@ -1874,8 +1878,22 @@ WE.renderTasks = function() {
   });
 };
 
+function _matchesViewTab(t) {
+  if (_taskViewTab === 'all') return true;
+  if (_taskViewTab === 'active') return t.status === 'running' || t.status === 'pending' || t.status === 'failed';
+  if (_taskViewTab === 'inbox') return t.source === 'slack';
+  if (_taskViewTab === 'automation') return t.type === 'recurring' && t.source !== 'slack';
+  if (_taskViewTab === 'done') return t.status === 'completed' || t.status === 'cancelled';
+  return true;
+}
+
+function _countInbox(tasks) {
+  return tasks.filter(function(t) { return t.source === 'slack' && t.status !== 'completed' && t.status !== 'cancelled' && t.status !== 'dismissed'; }).length;
+}
+
 function filterTasks(tasks) {
   return tasks.filter(function(t) {
+    if (!_matchesViewTab(t)) return false;
     if (_taskFilter.statusSet.size > 0 && !_taskFilter.statusSet.has(t.status)) return false;
     if (_taskFilter.type === 'recurring' && t.type !== 'recurring') return false;
     if (_taskFilter.type === 'once' && t.type === 'recurring') return false;
@@ -1926,6 +1944,32 @@ WE._reconnectSlack = function() {
   });
 };
 
+WE._switchTaskView = function(tab) {
+  _taskViewTab = tab;
+  _taskFilter.statusSet.clear();
+  _collapsedGroups.clear();
+  _expandedGroups.clear();
+  if (cache.allTasks) _renderTasksDirect(filterTasks(cache.allTasks));
+};
+
+WE._toggleTaskExpand = function(id) {
+  if (_expandedTasks.has(id)) _expandedTasks.delete(id);
+  else _expandedTasks.add(id);
+  _snapshotGroupState();
+  if (cache.allTasks) _renderTasksDirect(filterTasks(cache.allTasks));
+};
+
+// Capture current open/closed state of all <details> groups before re-render
+function _snapshotGroupState() {
+  var groups = document.querySelectorAll('.we-task-group[data-group-key]');
+  groups.forEach(function(el) {
+    var key = el.getAttribute('data-group-key');
+    if (!key) return;
+    if (el.open) { _expandedGroups.add(key); _collapsedGroups.delete(key); }
+    else { _collapsedGroups.add(key); _expandedGroups.delete(key); }
+  });
+}
+
 WE._clearAllFilters = function() {
   _taskFilter.statusSet.clear();
   _taskFilter.search = '';
@@ -1995,42 +2039,62 @@ function _renderTasksContentInner(tasks) {
   var body = document.getElementById('walle-body');
   if (!body) return;
 
-  var totalCount = cache.allTasks ? cache.allTasks.length : tasks.length;
-  // ── Toolbar: search + filters + group toggle + new button ──
-  var html = '<div class="we-task-toolbar">';
-  html += '<input class="we-chat-search-input" id="we-task-search" placeholder="Search tasks..." value="' + esc(_taskFilter.search) + '" oninput="WE._onTaskFilter()" style="flex:1">';
-  html += '<select class="walle-filter-select" id="we-task-type-filter" onchange="WE._onTaskFilter()">';
-  html += '<option value="all"' + (_taskFilter.type === 'all' ? ' selected' : '') + '>All types</option>';
-  html += '<option value="recurring"' + (_taskFilter.type === 'recurring' ? ' selected' : '') + '>Recurring</option>';
-  html += '<option value="once"' + (_taskFilter.type === 'once' ? ' selected' : '') + '>One-time</option>';
-  html += '<option value="script"' + (_taskFilter.type === 'script' ? ' selected' : '') + '>Script</option>';
-  html += '<option value="ai"' + (_taskFilter.type === 'ai' ? ' selected' : '') + '>AI</option>';
-  html += '</select>';
-  // Group-by toggle
-  html += '<select class="walle-filter-select" id="we-task-group" onchange="WE._onTaskFilter()">';
-  html += '<option value="status"' + ((_taskFilter.group || 'status') === 'status' ? ' selected' : '') + '>By status</option>';
-  html += '<option value="type"' + (_taskFilter.group === 'type' ? ' selected' : '') + '>By type</option>';
-  html += '</select>';
-  html += '<button class="walle-btn primary" onclick="WE._newTaskForm()">+ New</button>';
+  var allTasks = cache.allTasks || tasks;
+  var inboxCount = _countInbox(allTasks);
+
+  // ── View Tabs ──
+  var html = '<div class="we-view-tabs">';
+  var tabs = [
+    { id: 'active', label: 'Active' },
+    { id: 'inbox', label: 'Inbox', badge: inboxCount },
+    { id: 'automation', label: 'Automation' },
+    { id: 'done', label: 'Done' },
+    { id: 'all', label: 'All' }
+  ];
+  tabs.forEach(function(tab) {
+    var cls = 'we-view-tab' + (_taskViewTab === tab.id ? ' active' : '');
+    html += '<button class="' + cls + '" onclick="WE._switchTaskView(\'' + tab.id + '\')">' + tab.label;
+    if (tab.badge) html += '<span class="we-view-tab-badge">' + tab.badge + '</span>';
+    html += '</button>';
+  });
+  html += '<button class="walle-btn primary" style="margin-left:auto" onclick="WE._newTaskForm()">+ New</button>';
   html += '</div>';
 
-  // Clickable status filter pills
-  var counts = { running: 0, pending: 0, paused: 0, completed: 0, failed: 0 };
-  (cache.allTasks || tasks).forEach(function(t) { if (counts[t.status] !== undefined) counts[t.status]++; });
-  var statusLabels = { running: 'running', pending: 'pending', paused: 'paused', completed: 'done', failed: 'failed' };
-  html += '<div class="we-task-summary">';
-  ['running', 'pending', 'paused', 'completed', 'failed'].forEach(function(s) {
-    var active = _taskFilter.statusSet.has(s);
-    var cls = 'we-task-summary-item ' + s + (active ? ' active' : '');
-    html += '<span class="' + cls + '" onclick="WE._toggleStatusFilter(\'' + s + '\')">' + counts[s] + ' ' + statusLabels[s] + '</span>';
-  });
-  var hasAnyFilter = _taskFilter.statusSet.size > 0 || _taskFilter.search || _taskFilter.type !== 'all';
-  if (hasAnyFilter) html += '<span class="we-task-clear-btn" onclick="WE._clearAllFilters()" title="Clear all filters">&times;</span>';
-  if (tasks.length < totalCount) html += '<span style="color:#666;margin-left:4px">' + tasks.length + '/' + totalCount + '</span>';
-  html += '</div>';
+  // ── Toolbar: search + filters (only in active/all/done views) ──
+  if (_taskViewTab !== 'automation') {
+    html += '<div class="we-task-toolbar">';
+    html += '<input class="we-chat-search-input" id="we-task-search" placeholder="Search tasks..." value="' + esc(_taskFilter.search) + '" oninput="WE._onTaskFilter()" style="flex:1">';
+    if (_taskViewTab === 'all') {
+      html += '<select class="walle-filter-select" id="we-task-type-filter" onchange="WE._onTaskFilter()">';
+      html += '<option value="all"' + (_taskFilter.type === 'all' ? ' selected' : '') + '>All types</option>';
+      html += '<option value="recurring"' + (_taskFilter.type === 'recurring' ? ' selected' : '') + '>Recurring</option>';
+      html += '<option value="once"' + (_taskFilter.type === 'once' ? ' selected' : '') + '>One-time</option>';
+      html += '<option value="script"' + (_taskFilter.type === 'script' ? ' selected' : '') + '>Script</option>';
+      html += '<option value="ai"' + (_taskFilter.type === 'ai' ? ' selected' : '') + '>AI</option>';
+      html += '</select>';
+    }
+    html += '</div>';
+  }
 
-  // Slack auth banner — show if any task has a Slack auth error
-  var hasSlackAuthError = (cache.allTasks || tasks).some(function(t) {
+  // ── Context pills (for active/all views) ──
+  if (_taskViewTab === 'active' || _taskViewTab === 'all') {
+    var counts = { running: 0, pending: 0, paused: 0, completed: 0, failed: 0 };
+    allTasks.forEach(function(t) { if (counts[t.status] !== undefined) counts[t.status]++; });
+    var statusLabels = { running: 'running', pending: 'pending', paused: 'paused', completed: 'done', failed: 'failed' };
+    var visibleStatuses = _taskViewTab === 'active' ? ['running', 'pending', 'failed'] : ['running', 'pending', 'paused', 'completed', 'failed'];
+    html += '<div class="we-task-summary">';
+    visibleStatuses.forEach(function(s) {
+      var active = _taskFilter.statusSet.has(s);
+      var cls = 'we-task-summary-item ' + s + (active ? ' active' : '');
+      html += '<span class="' + cls + '" onclick="WE._toggleStatusFilter(\'' + s + '\')">' + counts[s] + ' ' + statusLabels[s] + '</span>';
+    });
+    var hasAnyFilter = _taskFilter.statusSet.size > 0 || _taskFilter.search || _taskFilter.type !== 'all';
+    if (hasAnyFilter) html += '<span class="we-task-clear-btn" onclick="WE._clearAllFilters()" title="Clear all filters">&times;</span>';
+    html += '</div>';
+  }
+
+  // Slack auth banner
+  var hasSlackAuthError = allTasks.some(function(t) {
     return t.error && (t.error.includes('Slack token expired') || t.error.includes('invalid_auth'));
   });
   if (hasSlackAuthError) {
@@ -2044,60 +2108,157 @@ function _renderTasksContentInner(tasks) {
   html += '<div id="we-new-task-form" style="display:none"></div>';
 
   if (tasks.length === 0) {
-    html += '<div class="walle-empty" style="padding:20px">No tasks match your filters.</div>';
+    var emptyMsg = _taskViewTab === 'inbox' ? 'No Slack requests yet. Mention @walle in Slack to assign tasks.' : 'No tasks match your filters.';
+    html += '<div class="walle-empty" style="padding:20px">' + emptyMsg + '</div>';
     safeSetHtml(body, html);
     return;
   }
 
-  // ── Grouping ──
-  var groupBy = _taskFilter.group || 'status';
-  var groupEl = document.getElementById('we-task-group');
-  if (groupEl) groupBy = groupEl.value;
-
-  // Expanded by default: running, pending, failed. Collapsed: paused, completed.
-  var expandByDefault = { running: true, pending: true, failed: true, paused: false, completed: false, recurring: true, once: true };
-
-  function taskGroup(label, items, color, key) {
-    var open = _taskFilter.search ? ' open' : (expandByDefault[key] !== false ? ' open' : '');
-    var h = '<details class="we-task-group"' + open + '>';
-    h += '<summary class="we-task-group-header" style="color:' + (color || '#aaa') + '">' + label + ' (' + items.length + ')</summary>';
-    items.forEach(function(t) { h += renderTaskCard(t); });
-    h += '</details>';
-    return h;
+  // ── Automation table view ──
+  if (_taskViewTab === 'automation') {
+    html += _renderAutomationTable(tasks);
+    safeSetHtml(body, html);
+    // Still poll running tasks
+    var runningTasks = tasks.filter(function(t) { return t.status === 'running'; });
+    var runningIds = {};
+    runningTasks.forEach(function(t) { runningIds[t.id] = true; _pollTaskLogs(t.id); });
+    Object.keys(_logPollers).forEach(function(id) { if (!runningIds[id]) _stopLogPoller(id); });
+    if (runningTasks.length > 0) _ensureRunningTimer();
+    _setupTaskRefreshPoller(tasks, runningTasks);
+    return;
   }
 
-  if (groupBy === 'type') {
-    var recurring = tasks.filter(function(t) { return t.type === 'recurring'; });
-    var oneTime = tasks.filter(function(t) { return t.type !== 'recurring'; });
-    if (recurring.length > 0) html += taskGroup('Recurring', recurring, '#60a5fa', 'recurring');
-    if (oneTime.length > 0) html += taskGroup('One-time', oneTime, '#aaa', 'once');
-  } else {
-    var statusOrder = ['running', 'pending', 'paused', 'failed', 'completed'];
+  // ── Inbox view — group by lifecycle ──
+  if (_taskViewTab === 'inbox') {
+    var inboxNew = tasks.filter(function(t) { return t.status === 'pending'; });
+    var inboxProgress = tasks.filter(function(t) { return t.status === 'running'; });
+    var inboxFailed = tasks.filter(function(t) { return t.status === 'failed'; });
+    var inboxActiveThread = tasks.filter(function(t) { return (t.status === 'completed' || t.status === 'cancelled') && t.slack_thread && t.slack_thread.active; });
+    var activeThreadIds = {};
+    inboxActiveThread.forEach(function(t) { activeThreadIds[t.id] = true; });
+    var inboxDone = tasks.filter(function(t) { return (t.status === 'completed' || t.status === 'cancelled') && !activeThreadIds[t.id]; });
+    if (inboxActiveThread.length > 0) html += _taskGroup('Active Conversations', inboxActiveThread, '#4ade80', 'active-thread');
+    if (inboxProgress.length > 0) html += _taskGroup('In Progress', inboxProgress, '#228be6', 'running');
+    if (inboxNew.length > 0) html += _taskGroup('New', inboxNew, '#fab005', 'pending');
+    if (inboxFailed.length > 0) html += _taskGroup('Failed', inboxFailed, '#e03131', 'failed');
+    if (inboxDone.length > 0) html += _taskGroup('Done', inboxDone, '#5c940d', 'completed', true);
+  }
+  // ── Active / Done / All views — group by status ──
+  else {
+    var statusOrder = _taskViewTab === 'done'
+      ? ['completed', 'cancelled']
+      : ['running', 'pending', 'paused', 'failed', 'completed'];
     var groups = {};
     statusOrder.forEach(function(s) { groups[s] = []; });
     tasks.forEach(function(t) { (groups[t.status] || groups.pending).push(t); });
-
-    var colors = { running: '#228be6', pending: '#fab005', paused: '#888', completed: '#5c940d', failed: '#e03131' };
+    var colors = { running: '#228be6', pending: '#fab005', paused: '#888', completed: '#5c940d', failed: '#e03131', cancelled: '#666' };
     statusOrder.forEach(function(status) {
       var g = groups[status];
       if (g.length === 0) return;
-      html += taskGroup(status.charAt(0).toUpperCase() + status.slice(1), g, colors[status], status);
+      var collapsed = (status === 'paused' || status === 'completed' || status === 'cancelled');
+      html += _taskGroup(status.charAt(0).toUpperCase() + status.slice(1), g, colors[status], status, collapsed);
     });
   }
 
   safeSetHtml(body, html);
 
-  // Poll logs for running tasks (without re-rendering the page)
+  // Poll logs for running tasks
   var runningTasks = tasks.filter(function(t) { return t.status === 'running'; });
   var runningIds = {};
   runningTasks.forEach(function(t) { runningIds[t.id] = true; _pollTaskLogs(t.id); });
-  // Stop pollers for tasks that are no longer running
   Object.keys(_logPollers).forEach(function(id) { if (!runningIds[id]) _stopLogPoller(id); });
-
-  // Start/stop live elapsed-time ticking for running tasks
   if (runningTasks.length > 0) _ensureRunningTimer();
+  _setupTaskRefreshPoller(tasks, runningTasks);
+}
+
+function _taskGroup(label, items, color, key, defaultCollapsed) {
+  // User explicit state takes priority, then search forces open, then default
+  var isOpen;
+  if (_taskFilter.search) {
+    isOpen = true;
+  } else if (_expandedGroups.has(key)) {
+    isOpen = true;
+  } else if (_collapsedGroups.has(key)) {
+    isOpen = false;
+  } else {
+    isOpen = !defaultCollapsed;
+  }
+  var h = '<details class="we-task-group"' + (isOpen ? ' open' : '') + ' data-group-key="' + esc(key) + '">';
+  h += '<summary class="we-task-group-header" style="color:' + (color || '#aaa') + '">' + label + ' (' + items.length + ')</summary>';
+  items.forEach(function(t) { h += renderTaskCard(t); });
+  h += '</details>';
+  return h;
+}
+
+
+function _renderAutomationTable(tasks) {
+  var h = '';
+  // Health summary
+  var active = tasks.filter(function(t) { return t.status === 'pending' || t.status === 'running'; }).length;
+  var paused = tasks.filter(function(t) { return t.status === 'paused'; }).length;
+  var failed = tasks.filter(function(t) { return t.status === 'failed'; }).length;
+  h += '<div class="we-auto-health">';
+  h += '<span class="we-auto-health-item ok">' + active + ' active</span>';
+  if (paused > 0) h += '<span class="we-auto-health-item paused">' + paused + ' paused</span>';
+  if (failed > 0) h += '<span class="we-auto-health-item failed">' + failed + ' failed</span>';
+  h += '</div>';
+
+  h += '<table class="we-auto-table"><thead><tr>';
+  h += '<th>Task</th><th>Schedule</th><th>Last Run</th><th>Status</th><th></th>';
+  h += '</tr></thead><tbody>';
+  tasks.forEach(function(t) {
+    var statusColors = { running: '#228be6', pending: '#5c940d', completed: '#5c940d', failed: '#e03131', paused: '#888', cancelled: '#666' };
+    var statusIcons = { running: '\u25C9', pending: '\u25CF', completed: '\u2713', failed: '\u2717', paused: '\u23F8', cancelled: '\u2014' };
+    var color = statusColors[t.status] || '#888';
+    var icon = statusIcons[t.status] || '';
+    var lastRun = t.last_run_at ? timeAgo(t.last_run_at) : 'never';
+    var isExpanded = _expandedTasks.has(t.id);
+    h += '<tr class="we-auto-row' + (isExpanded ? ' expanded' : '') + '" onclick="WE._toggleTaskExpand(\'' + esc(t.id) + '\')">';
+    h += '<td class="we-auto-title">' + esc(t.title);
+    if (t.skill) h += ' <span class="walle-tag" style="background:#1a3a1a;color:#4ade80;font-size:9px">' + esc(t.skill) + '</span>';
+    h += '</td>';
+    h += '<td class="we-auto-sched">' + esc(t.schedule || (t.type === 'once' ? 'one-time' : '-')) + '</td>';
+    h += '<td class="we-auto-last">' + esc(lastRun) + '</td>';
+    h += '<td style="color:' + color + '">' + icon + ' ' + esc(t.status) + '</td>';
+    h += '<td class="we-auto-actions">';
+    if (t.status === 'running') h += '<button class="we-auto-btn" onclick="event.stopPropagation();WE._stopTask(\'' + esc(t.id) + '\')">Stop</button>';
+    else h += '<button class="we-auto-btn" onclick="event.stopPropagation();WE._runTaskNow(\'' + esc(t.id) + '\',this)">Run</button>';
+    h += '</td>';
+    h += '</tr>';
+    if (isExpanded) {
+      h += '<tr class="we-auto-detail"><td colspan="5">' + _renderExpandedCardContent(t) + '</td></tr>';
+    }
+  });
+  h += '</tbody></table>';
+  return h;
+}
+
+function _renderExpandedCardContent(t) {
+  var h = '';
+  if (t.description) h += '<div class="we-task-card-desc">' + esc(t.description) + '</div>';
+  var taskItems = _getBriefingItemsForTask(t);
+  if (taskItems.length > 0) h += renderBriefingItemsTable(taskItems, t);
+  if (t.status === 'running') {
+    h += '<div class="we-task-log-panel" id="we-task-log-' + esc(t.id) + '">';
+    h += '<div class="we-task-log-header"><span class="we-task-log-pulse"></span> Live output</div>';
+    h += '<pre class="we-task-log-content">Waiting for output...</pre>';
+    h += '</div>';
+  } else if (t.result || t.error) {
+    h += _renderTaskResultPanel(t);
+  }
+  h += '<div class="we-task-card-actions" style="margin-top:8px">';
+  if (t.status !== 'running') h += '<button class="walle-btn primary" onclick="WE._runTaskNow(\'' + esc(t.id) + '\',this)">Run Now</button>';
+  if (t.type === 'recurring') {
+    if (t.status === 'paused') h += '<button class="walle-btn" onclick="WE._pauseTask(\'' + esc(t.id) + '\',0)">Resume</button>';
+    else if (t.status !== 'running') h += '<button class="walle-btn" onclick="WE._pauseTask(\'' + esc(t.id) + '\',1)">Pause</button>';
+  }
+  h += '<button class="walle-btn" onclick="WE._editTask(\'' + esc(t.id) + '\')">Edit</button>';
+  h += '</div>';
+  h += '<div id="we-edit-task-' + esc(t.id) + '" style="display:none"></div>';
+  return h;
+}
 
-  // Light status check — only full re-render when a task changes status
+function _setupTaskRefreshPoller(tasks, runningTasks) {
   if (runningTasks.length > 0 && !_taskRefreshTimer) {
     _taskRefreshTimer = setInterval(function() {
       api('/tasks?limit=100').then(function(data) {
@@ -2109,6 +2270,7 @@ function _renderTasksContentInner(tasks) {
           if (displayed && displayed.status !== nt.status) changed = true;
         });
         if (changed) {
+          _snapshotGroupState();
           Object.keys(_logPollers).forEach(_stopLogPoller);
           _renderTasksDirect(filterTasks(newTasks));
         }
@@ -2413,15 +2575,25 @@ WE._copyTaskLink = function(taskId) {
   });
 };
 
+function _sourceIcon(t) {
+  var src = t.source || 'system';
+  if (src === 'slack') return '<span class="we-src-icon slack" title="From Slack">slack</span>';
+  if (src === 'chat') return '<span class="we-src-icon chat" title="From Chat">chat</span>';
+  if (src === 'initiative') return '<span class="we-src-icon init" title="Auto-created">auto</span>';
+  return '';
+}
+
 function renderTaskCard(t) {
   var q = _taskFilter.search || '';
   var statusColors = { running: '#228be6', pending: '#fab005', completed: '#5c940d', failed: '#e03131', paused: '#888', cancelled: '#666' };
   var borderColor = statusColors[t.status] || '#333';
+  var isRunning = t.status === 'running';
+  var isExpanded = _expandedTasks.has(t.id) || isRunning;
 
-  var html = '<div class="we-task-card" id="task-' + esc(t.id) + '" style="border-left-color:' + borderColor + '">';
+  var html = '<div class="we-task-card' + (isExpanded ? ' expanded' : ' compact') + '" id="task-' + esc(t.id) + '" style="border-left-color:' + borderColor + '">';
 
-  // Row 1: title + badges + status
-  html += '<div class="we-task-card-header">';
+  // Row 1: title + badges + status (always visible)
+  html += '<div class="we-task-card-header" onclick="WE._toggleTaskExpand(\'' + esc(t.id) + '\')" style="cursor:pointer">';
   html += '<span class="we-task-card-title">' + _hl(t.title, q);
   if (t.priority !== 'normal') html += ' <span class="walle-tag ' + esc(t.priority) + '">' + esc(t.priority) + '</span>';
   if (t.execution === 'script') html += ' <span class="walle-tag" style="background:#333;color:#aaa">script</span>';
@@ -2431,26 +2603,63 @@ function renderTaskCard(t) {
   html += '<span class="we-task-card-status" style="color:' + borderColor + '"><span class="we-status-dot we-status-dot--' + esc(t.status) + '"></span>' + esc(t.status) + '</span>';
   html += '</div>';
 
-  // Row 2: description
-  if (t.description) html += '<div class="we-task-card-desc">' + _hl(t.description, q) + '</div>';
-
-  // Row 3: metadata chips — primary (schedule + last run) always visible
-  html += '<div class="we-task-meta">';
+  // Row 2: compact metadata line (always visible)
+  html += '<div class="we-task-meta-compact">';
+  html += _sourceIcon(t);
   if (t.type === 'recurring' && t.schedule) html += '<span>\uD83D\uDD01 ' + esc(t.schedule) + '</span>';
-  if (t.last_run_at) html += '<span>\u23F1 Last: ' + esc(timeAgo(t.last_run_at)) + '</span>';
-  if (t.status === 'running' && t.started_at) {
+  if (t.last_run_at) html += '<span>Last: ' + esc(timeAgo(t.last_run_at)) + '</span>';
+  if (isRunning && t.started_at) {
     var startMs = new Date(t.started_at + (t.started_at.includes('Z') ? '' : 'Z')).getTime();
     var elapsedSec = Math.max(0, Math.floor((Date.now() - startMs) / 1000));
     var elStr = elapsedSec < 60 ? elapsedSec + 's' : Math.floor(elapsedSec / 60) + 'm ' + (elapsedSec % 60) + 's';
-    html += '<span class="we-task-running-timer" data-start-ms="' + startMs + '" style="color:#228be6">\u23F3 Running: ' + elStr + '</span>';
+    html += '<span class="we-task-running-timer" data-start-ms="' + startMs + '" style="color:#228be6">\u23F3 ' + elStr + '</span>';
+  }
+  if (t.run_count > 0 && !isExpanded) html += '<span>' + t.run_count + ' runs</span>';
+  // Slack source_ref link (rewrite to enterprise domain if needed)
+  if (t.source === 'slack' && t.source_ref) {
+    var slackUrl = t.source_ref.replace(/^(https:\/\/\w+)\.slack\.com/, '$1.enterprise.slack.com');
+    html += '<a class="we-src-link" href="' + esc(slackUrl) + '" target="_blank" onclick="event.stopPropagation()" title="Open Slack thread">\u2197 thread</a>';
+  }
+  // Compact inline actions
+  if (!isExpanded) {
+    html += '<span class="we-compact-actions">';
+    if (isRunning) html += '<button class="we-compact-btn stop" onclick="event.stopPropagation();WE._stopTask(\'' + esc(t.id) + '\')" title="Stop">\u25A0</button>';
+    else html += '<button class="we-compact-btn run" onclick="event.stopPropagation();WE._runTaskNow(\'' + esc(t.id) + '\',this)" title="Run">\u25B6</button>';
+    html += '<button class="we-compact-btn more" onclick="event.stopPropagation();WE._taskMenu(\'' + esc(t.id) + '\',this)" title="More actions">\u22EE</button>';
+    html += '</span>';
   }
-  // Secondary metadata — collapsed behind "details" toggle
-  var _hasExtra = (t.run_count > 0) || (t.last_duration_ms && t.last_duration_ms > 0 && t.status !== 'running') || (t.next_run_at && (t.status === 'pending' || t.status === 'paused'));
-  if (_hasExtra) {
-    html += '<span class="we-task-meta-toggle" onclick="this.parentElement.classList.toggle(\'we-meta-expanded\');event.stopPropagation()">details</span>';
-    html += '<span class="we-task-meta-extra">';
+  html += '</div>';
+
+  // ── Expanded content (only if expanded or running) ──
+  if (isExpanded) {
+    // Slack thread info panel
+    if (t.source === 'slack') {
+      html += '<div class="we-slack-info">';
+      // Clean description: strip the ---\n**IMPORTANT** instructions block
+      var cleanDesc = (t.description || '').replace(/\n---\n\*\*IMPORTANT\*\*[\s\S]*$/, '').replace(/^(Question from .+? in Slack:|Slack (?:task|mention) from .+?:)\n\n/, '').trim();
+      if (cleanDesc) html += '<div class="we-task-card-desc">' + _hl(cleanDesc, q) + '</div>';
+      // Thread watch status
+      if (t.slack_thread) {
+        var isActive = t.slack_thread.active;
+        var expiresAt = new Date(t.slack_thread.expires_at);
+        var msLeft = expiresAt - Date.now();
+        var timeLeft = msLeft > 0 ? (msLeft > 3600000 ? Math.floor(msLeft / 3600000) + 'h ' + Math.floor((msLeft % 3600000) / 60000) + 'm' : Math.floor(msLeft / 60000) + 'm') : '';
+        html += '<div class="we-slack-thread-status">';
+        html += isActive
+          ? '<span class="we-thread-badge active">\uD83D\uDFE2 Thread active</span><span class="we-thread-expires">Reply in Slack to continue \u00B7 expires in ' + timeLeft + '</span>'
+          : '<span class="we-thread-badge expired">\u26AA Thread expired</span>';
+        html += '</div>';
+      }
+      html += '</div>';
+    } else {
+      // Non-slack description
+      if (t.description) html += '<div class="we-task-card-desc">' + _hl(t.description, q) + '</div>';
+    }
+
+    // Extra metadata
+    html += '<div class="we-task-meta">';
     if (t.run_count > 0) html += '<span>\u25B6 ' + t.run_count + ' runs</span>';
-    if (t.last_duration_ms && t.last_duration_ms > 0 && t.status !== 'running') {
+    if (t.last_duration_ms && t.last_duration_ms > 0 && !isRunning) {
       var durSec = Math.round(t.last_duration_ms / 1000);
       var durStr = durSec < 60 ? durSec + 's' : Math.floor(durSec / 60) + 'm ' + (durSec % 60) + 's';
       html += '<span>\u23F1 Took: ' + durStr + '</span>';
@@ -2468,48 +2677,42 @@ function renderTaskCard(t) {
         }
       }
     }
-    html += '</span>';
-  }
-  html += '</div>';
-
-  // Row 4: briefing items (if any), live logs (running), or result (completed/failed)
-  var taskItems = _getBriefingItemsForTask(t);
-  if (taskItems.length > 0) {
-    html += renderBriefingItemsTable(taskItems, t);
-  }
-  if (t.status === 'running') {
-    html += '<div class="we-task-log-panel" id="we-task-log-' + esc(t.id) + '">';
-    html += '<div class="we-task-log-header"><span class="we-task-log-pulse"></span> Live output</div>';
-    html += '<pre class="we-task-log-content">Waiting for output...</pre>';
     html += '</div>';
-  } else if (t.result || t.error) {
-    html += _renderTaskResultPanel(t);
-  }
 
-  // Row 5: actions
-  html += '<div class="we-task-card-actions">';
-  if (t.status === 'running') {
-    html += '<button class="walle-btn" style="color:#e03131;border-color:#e03131" onclick="WE._stopTask(\'' + esc(t.id) + '\')">Stop</button>';
-  } else {
-    html += '<button class="walle-btn primary" id="we-run-btn-' + esc(t.id) + '" onclick="WE._runTaskNow(\'' + esc(t.id) + '\',this)">Run Now</button>';
-  }
-  // Pause/Resume for recurring
-  if (t.type === 'recurring') {
-    if (t.status === 'paused') html += '<button class="walle-btn" onclick="WE._pauseTask(\'' + esc(t.id) + '\',0)">Resume</button>';
-    else if (t.status !== 'running') html += '<button class="walle-btn" onclick="WE._pauseTask(\'' + esc(t.id) + '\',1)">Pause</button>';
-  }
-  // Cancel for pending one-time
-  if (t.status === 'pending' && t.type !== 'recurring') {
-    html += '<button class="walle-btn" onclick="WE._cancelTask(\'' + esc(t.id) + '\')">Cancel</button>';
-  }
-  // Remove for terminal states
-  if (t.status === 'completed' || t.status === 'failed' || t.status === 'cancelled') {
-    html += '<button class="walle-btn" onclick="WE._deleteTaskUI(\'' + esc(t.id) + '\')">Remove</button>';
+    // Briefing items
+    var taskItems = _getBriefingItemsForTask(t);
+    if (taskItems.length > 0) html += renderBriefingItemsTable(taskItems, t);
+
+    // Live logs or result
+    if (isRunning) {
+      html += '<div class="we-task-log-panel" id="we-task-log-' + esc(t.id) + '">';
+      html += '<div class="we-task-log-header"><span class="we-task-log-pulse"></span> Live output</div>';
+      html += '<pre class="we-task-log-content">Waiting for output...</pre>';
+      html += '</div>';
+    } else if (t.result || t.error) {
+      html += _renderTaskResultPanel(t);
+    }
+
+    // Full action row
+    html += '<div class="we-task-card-actions">';
+    if (isRunning) {
+      html += '<button class="walle-btn" style="color:#e03131;border-color:#e03131" onclick="WE._stopTask(\'' + esc(t.id) + '\')">Stop</button>';
+    } else {
+      html += '<button class="walle-btn primary" id="we-run-btn-' + esc(t.id) + '" onclick="WE._runTaskNow(\'' + esc(t.id) + '\',this)">Run Now</button>';
+    }
+    if (t.status === 'paused') {
+      html += '<button class="walle-btn" onclick="WE._pauseTask(\'' + esc(t.id) + '\',0)">Resume</button>';
+    } else if (!isRunning && t.status === 'pending') {
+      html += '<button class="walle-btn" onclick="WE._pauseTask(\'' + esc(t.id) + '\',1)">Pause</button>';
+    }
+    if (!isRunning) {
+      html += '<button class="walle-btn" style="color:#e03131;border-color:#e03131" onclick="WE._deleteTaskUI(\'' + esc(t.id) + '\')">Delete</button>';
+    }
+    html += '<button class="walle-btn" onclick="WE._editTask(\'' + esc(t.id) + '\')">Edit</button>';
+    html += '</div>';
+    html += '<div id="we-edit-task-' + esc(t.id) + '" style="display:none"></div>';
   }
-  html += '<button class="walle-btn" onclick="WE._editTask(\'' + esc(t.id) + '\')">Edit</button>';
-  html += '</div>';
 
-  html += '<div id="we-edit-task-' + esc(t.id) + '" style="display:none"></div>';
   html += '</div>';
   return html;
 }
@@ -2800,6 +3003,9 @@ WE._cancelTask = function(id) {
 };
 
 WE._deleteTaskUI = function(id) {
+  var t = (cache.allTasks || []).find(function(x) { return x.id === id; });
+  var title = t ? t.title : id.slice(0, 8);
+  if (!confirm('Delete task "' + title + '"?\n\nThis cannot be undone.')) return;
   var token = window._ctmState?.token || '';
   fetch(WALLE_BASE + '/api/wall-e/tasks/' + id + '?token=' + token, { method: 'DELETE' }).then(function() { WE.renderTasks(); });
 };
@@ -2808,6 +3014,53 @@ WE._retryTask = function(id) {
   apiPut('/tasks/' + id, { status: 'pending', error: null, result: null }).then(function() { WE.renderTasks(); });
 };
 
+WE._taskMenu = function(id, btn) {
+  // Close any existing menu
+  var old = document.querySelector('.we-task-menu');
+  if (old) old.remove();
+  var t = (cache.allTasks || []).find(function(x) { return x.id === id; });
+  if (!t) return;
+
+  var menu = document.createElement('div');
+  menu.className = 'we-task-menu';
+  var items = [];
+
+  // Context-appropriate actions
+  if (t.status === 'running') {
+    items.push({ label: '\u25A0 Stop', fn: function() { WE._stopTask(id); } });
+  } else {
+    items.push({ label: '\u25B6 Run Now', fn: function() { WE._runTaskNow(id); } });
+  }
+  if (t.status === 'paused') {
+    items.push({ label: '\u25B6 Resume', fn: function() { WE._pauseTask(id, 0); } });
+  } else if (t.status !== 'running') {
+    items.push({ label: '\u23F8 Pause', fn: function() { WE._pauseTask(id, 1); } });
+  }
+  items.push({ label: '\u270E Edit', fn: function() { WE._toggleTaskExpand(id); setTimeout(function() { WE._editTask(id); }, 100); } });
+  items.push({ label: '\u2716 Delete', fn: function() { WE._deleteTaskUI(id); }, danger: true });
+
+  items.forEach(function(item) {
+    var row = document.createElement('div');
+    row.className = 'we-task-menu-item' + (item.danger ? ' danger' : '');
+    row.textContent = item.label;
+    row.onclick = function(e) { e.stopPropagation(); menu.remove(); item.fn(); };
+    menu.appendChild(row);
+  });
+
+  // Position relative to button
+  var rect = btn.getBoundingClientRect();
+  menu.style.position = 'fixed';
+  menu.style.top = (rect.bottom + 4) + 'px';
+  menu.style.left = (rect.right - 140) + 'px';
+  document.body.appendChild(menu);
+
+  // Close on outside click
+  setTimeout(function() {
+    function close(e) { if (!menu.contains(e.target)) { menu.remove(); document.removeEventListener('click', close); } }
+    document.addEventListener('click', close);
+  }, 0);
+};
+
 WE._editTask = function(id) {
   var el = document.getElementById('we-edit-task-' + id);
   if (!el) return;