diff --git a/static/js/tasks.js b/static/js/tasks.js
index 6b4817440..1bf986884 100644
--- a/static/js/tasks.js
+++ b/static/js/tasks.js
@@ -373,7 +373,7 @@ function _absoluteTime(iso) {
 }
 
 function _statusDot(status) {
-  const colors = { active: '#4caf50', paused: '#ff9800', completed: '#888', error: '#f44336' };
+  const colors = { active: '#4caf50', paused: '#ff9800', completed: '#888', error: '#f44336', failed: '#f44336' };
   const c = colors[status] || '#888';
   return `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${c};box-shadow:0 0 6px ${c}, 0 0 3px ${c};flex-shrink:0;position:relative;top:4px;"></span>`;
 }
@@ -854,7 +854,7 @@ function _renderList() {
       detail.appendChild(ex);
     }
     if (task.last_run_status) {
-      const isErr = task.last_run_status === 'error';
+      const isErr = task.last_run_status === 'error' || task.last_run_status === 'failed';
       const color = isErr ? 'var(--red,#e06c75)' : 'var(--green,#50fa7b)';
       const result = (task.last_run_result || '').trim();
       const prev = result.length > 200 ? result.slice(0, 200) + '…' : result;
@@ -1661,7 +1661,7 @@ async function _showRunHistory(taskId, taskName) {
   } else {
     html += '<div class="task-runs-list">';
     for (const run of runs) {
-      const statusClass = run.status === 'success' ? 'task-run-success' : run.status === 'error' ? 'task-run-error' : 'task-run-running';
+      const statusClass = run.status === 'success' ? 'task-run-success' : (run.status === 'error' || run.status === 'failed') ? 'task-run-error' : 'task-run-running';
       html += `<div class="task-run-item ${statusClass}">
         <div class="task-run-item-header">
           ${_statusDot(run.status === 'success' ? 'active' : run.status)}
@@ -1894,7 +1894,7 @@ async function _renderActivityView() {
   const _entryCat = (e) => _categoryLabel(e.taskName);
   const _entryStatus = (e) =>
     (e.status === 'success' || _classifyResult(e.result) === 'ok') ? 'ok'
-    : (e.status === 'error' || _classifyResult(e.result) === 'error') ? 'error' : 'info';
+    : (e.status === 'error' || e.status === 'failed' || _classifyResult(e.result) === 'error') ? 'error' : 'info';
   const _isNotification = (e) => e.output_target === 'notification';
 
   const _matchesSolo = (e) => {
@@ -2338,7 +2338,7 @@ function _renderActivityEntry(entry) {
   let status;
   if (entry.status === 'queued' || entry.status === 'running' || entry.status === 'skipped' || entry.status === 'aborted') {
     status = entry.status;
-  } else if (entry.status === 'error') {
+  } else if (entry.status === 'error' || entry.status === 'failed') {
     status = 'error';
   } else if (entry.status === 'success') {
     status = 'ok';
@@ -2387,7 +2387,8 @@ function _renderActivityEntry(entry) {
   const promptHtml = entry.prompt
     ? `<details class="task-log-prompt"><summary>Prompt</summary><pre>${_escHtml(entry.prompt)}</pre></details>`
     : '';
-  const hue = _categoryHue(entry.taskName, entry.kind);
+  const hue = status === 'error' ? 0 : _categoryHue(entry.taskName, entry.kind);
+  const rowStatusClass = ` task-log-row-${status}`;
   // CSS vars feed the colored title + accent stripe.
   const styleVars = `--cat-hue:${hue};`;
   const _runningPlaceholder = /^(Starting…|Starting\.\.\.|_Running…_|_Running\.\.\._|_Queued\b)/i.test((entry.result || '').trim());
@@ -2455,7 +2456,7 @@ function _renderActivityEntry(entry) {
   if (_isSkipped) {
     const reason = (entry.result || '').trim();
     return `
-      <div class="task-log-row is-skipped" data-kind="${_escHtml(entry.kind)}" data-entry-idx="${entryIdx}" style="${styleVars}">
+      <div class="task-log-row is-skipped${rowStatusClass}" data-kind="${_escHtml(entry.kind)}" data-entry-idx="${entryIdx}" style="${styleVars}">
         <div class="task-log-row-head">
           ${statusDot}
           <span class="task-log-task-icon">${_taskIcon({ action: entry.action, task_type: entry.kind })}</span>
@@ -2468,7 +2469,7 @@ function _renderActivityEntry(entry) {
     `;
   }
   return `
-    <div class="task-log-row${long ? ' is-long' : ''}${_isRunning ? ' is-running' : ''}" data-kind="${_escHtml(entry.kind)}" data-entry-idx="${entryIdx}" style="${styleVars}">
+    <div class="task-log-row${rowStatusClass}${long ? ' is-long' : ''}${_isRunning ? ' is-running' : ''}" data-kind="${_escHtml(entry.kind)}" data-entry-idx="${entryIdx}" style="${styleVars}">
       <div class="task-log-row-head">
         ${statusDot}
         <span class="task-log-task-icon">${_taskIcon({ action: entry.action, task_type: entry.kind })}</span>
diff --git a/static/style.css b/static/style.css
index 21d730b0e..884bd09e0 100644
--- a/static/style.css
+++ b/static/style.css
@@ -23253,6 +23253,13 @@ body:not(.welcome-ready) #welcome-screen {
 .task-log-row:hover {
   background: color-mix(in srgb, var(--fg) 4%, transparent);
 }
+.task-log-row.task-log-row-error {
+  border-color: color-mix(in srgb, var(--red, #f87171) 35%, var(--border));
+  background: color-mix(in srgb, var(--red, #f87171) 4%, transparent);
+}
+.task-log-row.task-log-row-error:hover {
+  background: color-mix(in srgb, var(--red, #f87171) 7%, transparent);
+}
 .task-log-row.expanded { padding: 8px 10px 6px; }
 .task-log-row-head {
   display: flex;
@@ -23288,6 +23295,13 @@ body:not(.welcome-ready) #welcome-screen {
   flex: 0 0 auto;
   margin-right: -3px;
 }
+.task-log-row.task-log-row-error .task-log-name,
+.task-log-row.task-log-row-error .task-log-task-icon {
+  color: var(--red, #f87171);
+}
+.task-log-row.task-log-row-error .task-log-task-icon svg {
+  opacity: 0.82 !important;
+}
 .task-log-task-icon svg {
   top: 0 !important;
   opacity: 0.46 !important;