From b7477d063aaf60262b06526299b595af5d9aa463 Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Tue, 2 Jun 2026 06:57:53 +0900
Subject: [PATCH] Clarify task status controls on mobile

---
 static/js/tasks.js | 6 +++---
 static/style.css   | 9 +++++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/static/js/tasks.js b/static/js/tasks.js
index 262410b..4a21d79 100644
--- a/static/js/tasks.js
+++ b/static/js/tasks.js
@@ -656,9 +656,9 @@ function _renderList() {
     const titleRow = document.createElement('div');
     titleRow.style.cssText = 'display:flex;align-items:center;gap:6px;cursor:pointer;';
     const statusBadge = task.status === 'paused'
-      ? `<span class="task-status-badge task-paused-badge" data-task-status-action="resume" title="Click to resume" style="position:relative;top:4px;"><svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg> paused</span>`
+      ? `<span class="task-status-badge task-paused-badge" data-task-status-action="resume" title="Paused - click to resume" style="position:relative;top:4px;"><svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><polygon points="7 4 19 12 7 20 7 4"/></svg> paused</span>`
       : task.status === 'active'
-        ? `<span class="task-status-badge task-active-badge" data-task-status-action="pause" title="Click to pause" style="position:relative;top:4px;">active</span>`
+        ? `<span class="task-status-badge task-active-badge" data-task-status-action="pause" title="Active - click to pause" style="position:relative;top:4px;"><svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg> active</span>`
         : '';
     const builtinBadge = task.is_builtin
       ? `<span class="task-builtin-badge${task.is_modified ? ' modified' : ''}" title="${task.is_modified ? 'Built-in task — edited from its default' : 'Built-in task'}">built-in${task.is_modified ? ' · edited' : ''}</span>`
@@ -700,7 +700,7 @@ function _renderList() {
       const runBtn = document.createElement('button');
       runBtn.className = 'task-status-badge task-run-now-badge task-card-run-btn';
       runBtn.title = 'Run now';
-      runBtn.style.cssText = 'position:relative;top:2px;margin-right:4px;';
+      runBtn.style.cssText = 'position:relative;top:4px;margin-right:4px;';
       runBtn.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg><span>Run now</span>';
       runBtn.addEventListener('click', (e) => { e.stopPropagation(); _doRunNow(task.id); });
       actionsWrap.insertBefore(runBtn, menuBtn);
diff --git a/static/style.css b/static/style.css
index 7240141..fd846af 100644
--- a/static/style.css
+++ b/static/style.css
@@ -21207,6 +21207,15 @@ a.chat-link[href^="#research-"] {
   .task-dropdown { min-width: 160px !important; padding: 6px !important; }
   .task-dropdown button { font-size: 13px !important; padding: 10px 12px !important; gap: 10px !important; }
   .task-dropdown button svg { width: 15px !important; height: 15px !important; }
+  .task-card .task-status-badge {
+    padding-left: 5px;
+    padding-right: 5px;
+    gap: 2px;
+    letter-spacing: 0.15px;
+  }
+  .task-card .task-card-run-btn {
+    margin-right: 1px !important;
+  }
 }
 
 .task-card-header {