From 7aa25f1d8c2a43c1ee2908b3058535e3598514a2 Mon Sep 17 00:00:00 2001
From: timmy <timmy@stackchain.ai>
Date: Tue, 11 Aug 2026 23:56:39 +0000
Subject: [PATCH] feat: complete Today from mobile HUD (Closes #601)

---
 frontend/dashboard.css         |  8 ++--
 frontend/dashboard.js          |  4 ++
 frontend/index.html            |  1 +
 frontend/today-timer.js        | 17 ++++++++-
 tests/test_mobile_task_dock.py | 68 ++++++++++++++++++++++++++++++++++
 5 files changed, 94 insertions(+), 4 deletions(-)

diff --git a/frontend/dashboard.css b/frontend/dashboard.css
index 7ba29d5..6b2638d 100644
--- a/frontend/dashboard.css
+++ b/frontend/dashboard.css
@@ -574,9 +574,11 @@ textarea { resize: vertical; min-height: 120px; }
   .composer-keyboard-active .update-reply { scroll-margin-block:12px; padding-bottom:env(safe-area-inset-bottom); }
   .mobile-task-dock { position:fixed; inset:auto 0 0; z-index:45; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding:6px 8px; padding-bottom:env(safe-area-inset-bottom); border-top:1px solid #2a496e; background:rgba(11,21,38,.98); backdrop-filter:blur(12px); }
   .mobile-task-dock[data-attention="true"] { grid-template-columns:repeat(6,minmax(0,1fr)); }
-  .mobile-today-hud { position:fixed; left:8px; right:8px; bottom:calc(56px + env(safe-area-inset-bottom)); z-index:44; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; max-width:100%; padding:8px; border:1px solid #31577f; border-radius:12px 12px 0 0; background:rgba(16,38,65,.98); box-shadow:0 -8px 24px rgba(0,0,0,.28); }
-  .mobile-today-summary { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font-weight:700; }
-  .mobile-today-hud [data-work-session-progress] { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .mobile-today-hud { position:fixed; left:8px; right:8px; bottom:calc(56px + env(safe-area-inset-bottom)); z-index:44; display:grid; grid-template-columns:minmax(0,1fr) minmax(112px,auto); grid-template-areas:"summary complete" "progress toggle"; gap:4px 8px; max-width:100%; padding:8px; border:1px solid #31577f; border-radius:12px 12px 0 0; background:rgba(16,38,65,.98); box-shadow:0 -8px 24px rgba(0,0,0,.28); }
+  .mobile-today-summary { grid-area:summary; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font-weight:700; }
+  .mobile-today-hud [data-work-session-progress] { grid-area:progress; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .mobile-today-hud [data-mobile-today-complete] { grid-area:complete; }
+  .mobile-today-hud [data-mobile-today-toggle] { grid-area:toggle; }
   .mobile-today-hud button { min-height:44px; max-width:100%; }
   .mobile-today-hud [data-work-session-adjust-plan] { grid-column:1 / -1; }
 }
diff --git a/frontend/dashboard.js b/frontend/dashboard.js
index 41d6f53..e1aaed6 100644
--- a/frontend/dashboard.js
+++ b/frontend/dashboard.js
@@ -955,6 +955,10 @@
       selectTodayWork();
       workSession.reopen(todayMyWork.find(item => todayWork.identity(item) === identity));
     },
+    onComplete: identity => {
+      const item = todayMyWork.find(entry => todayWork.identity(entry) === identity);
+      return completeTodayItem(item);
+    },
   });
   renderAttentionInterruption();
   qs('#return-to-today').addEventListener('click', () => {
diff --git a/frontend/index.html b/frontend/index.html
index b9b0ef3..bd5f408 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -813,6 +813,7 @@
 
 <section class="mobile-today-hud" data-mobile-today-hud aria-label="Active Today session" hidden>
   <button class="mobile-today-summary" data-mobile-today-open type="button" aria-label="Open current Today item"></button>
+  <button data-mobile-today-complete type="button" hidden>Done &amp; next</button>
   <div class="small" data-work-session-progress aria-live="polite"></div>
   <button data-mobile-today-toggle data-work-session-timer-toggle type="button">Pause timer</button>
   <button data-work-session-adjust-plan type="button" hidden>Adjust remaining plan</button>
diff --git a/frontend/today-timer.js b/frontend/today-timer.js
index 17318c1..0f5f1bd 100644
--- a/frontend/today-timer.js
+++ b/frontend/today-timer.js
@@ -200,7 +200,7 @@ function createTodayTimer({ storage, getLogin, now = () => Date.now() }) {
   };
 }
 
-function createTodayTimerView({ timer, isActive, queryAll, formatEstimate, getRunway, getItem, onReopen }) {
+function createTodayTimerView({ timer, isActive, queryAll, formatEstimate, getRunway, getItem, onReopen, onComplete }) {
   let progress = null;
   let runway = null;
   queryAll('[data-mobile-today-open]').forEach(button =>
@@ -212,6 +212,12 @@ function createTodayTimerView({ timer, isActive, queryAll, formatEstimate, getRu
   queryAll('[data-mobile-today-toggle]').forEach(button =>
     button.addEventListener('click', () => view.toggle())
   );
+  queryAll('[data-mobile-today-complete]').forEach(button =>
+    button.addEventListener('click', () => {
+      const identity = timer.snapshot().identity;
+      if (identity) onComplete?.(identity);
+    })
+  );
   if (typeof document !== 'undefined') queryAll('.work-session-nav').forEach(nav => {
     const button = document.createElement('button');
     button.type = 'button';
@@ -247,6 +253,15 @@ function createTodayTimerView({ timer, isActive, queryAll, formatEstimate, getRu
     queryAll('[data-mobile-today-open]').forEach(element => {
       element.textContent = active ? String(getItem?.(snapshot.identity)?.title || 'Current Today item') : '';
     });
+    queryAll('[data-mobile-today-complete]').forEach(button => {
+      const itemTitle = String(getItem?.(snapshot.identity)?.title || 'current Today item');
+      const finalItem = Boolean(progress && progress.index >= progress.total);
+      button.hidden = !active;
+      button.textContent = finalItem ? 'Done & recap' : 'Done & next';
+      button.setAttribute('aria-label', finalItem ?
+        'Complete ' + itemTitle + ' and open Today recap' :
+        'Complete ' + itemTitle + ' and open next Today item');
+    });
     if (typeof document !== 'undefined') document.body.classList.toggle('mobile-today-active', active);
     if (!progress) return;
     const sourceRunway = getRunway?.(snapshot) || runway;
diff --git a/tests/test_mobile_task_dock.py b/tests/test_mobile_task_dock.py
index f3a0409..e8046bb 100644
--- a/tests/test_mobile_task_dock.py
+++ b/tests/test_mobile_task_dock.py
@@ -9,6 +9,7 @@ from tests.dashboard_bundle import dashboard
 
 DOCK = Path(__file__).resolve().parents[1] / "frontend" / "mobile-task-dock.js"
 ENTRY = Path(__file__).resolve().parents[1] / "frontend" / "mobile-work-entry.js"
+TIMER = Path(__file__).resolve().parents[1] / "frontend" / "today-timer.js"
 
 
 def test_mobile_work_entry_prioritizes_continue_resume_start_then_fallback():
@@ -146,6 +147,67 @@ process.stdout.write(JSON.stringify({{
     }
 
 
+def test_mobile_today_hud_completes_current_item_and_labels_final_item_for_recap():
+    script = f"""
+const createView = require({json.dumps(str(TIMER))}).createView;
+class FakeElement {{
+  constructor() {{ this.listeners = {{}}; this.hidden = true; this.textContent = ''; this.attributes = {{}}; }}
+  addEventListener(name, callback) {{ this.listeners[name] = callback; }}
+  click() {{ return this.listeners.click?.(); }}
+  setAttribute(name, value) {{ this.attributes[name] = value; }}
+}}
+const hud = new FakeElement();
+const open = new FakeElement();
+const toggle = new FakeElement();
+const complete = new FakeElement();
+const progress = new FakeElement();
+const elements = {{
+  '[data-mobile-today-hud]':[hud],
+  '[data-mobile-today-open]':[open],
+  '[data-mobile-today-toggle]':[toggle],
+  '[data-mobile-today-complete]':[complete],
+  '[data-work-session-progress]':[progress],
+  '[data-work-session-adjust-plan]':[],
+  '[data-work-session-timer-toggle]':[toggle],
+}};
+let active = true;
+const snapshot = {{identity:'issue:r:1:', elapsed_ms:0, running:true}};
+const completed = [];
+const view = createView({{
+  timer:{{snapshot:()=>snapshot,totalElapsed:()=>0,pause:()=>true,resume:()=>true}},
+  isActive:()=>active,
+  queryAll:selector=>elements[selector] || [],
+  formatEstimate:value=>value + 'm',
+  getItem:()=>({{title:'Ship mobile flow'}}),
+  onComplete:identity=>{{ completed.push(identity); return false; }},
+}});
+view.update({{index:1,total:2}}, null);
+const next = {{hidden:complete.hidden,label:complete.textContent,aria:complete.attributes['aria-label']}};
+complete.click();
+const preservedAfterFailure = {{hudHidden:hud.hidden,identity:snapshot.identity}};
+view.update({{index:2,total:2}}, null);
+const recap = {{hidden:complete.hidden,label:complete.textContent}};
+active = false; view.render();
+process.stdout.write(JSON.stringify({{next,recap,completed,preservedAfterFailure,hiddenWhenInactive:complete.hidden}}));
+"""
+    result = subprocess.run(
+        ["node", "-e", script], capture_output=True, text=True
+    )
+
+    assert result.returncode == 0, result.stderr
+    assert json.loads(result.stdout) == {
+        "next": {
+            "hidden": False,
+            "label": "Done & next",
+            "aria": "Complete Ship mobile flow and open next Today item",
+        },
+        "recap": {"hidden": False, "label": "Done & recap"},
+        "completed": ["issue:r:1:"],
+        "preservedAfterFailure": {"hudHidden": False, "identity": "issue:r:1:"},
+        "hiddenWhenInactive": True,
+    }
+
+
 def test_mobile_task_dock_exposes_independent_attention_action_and_six_column_state():
     script = f"""
 const createDock = require({json.dumps(str(DOCK))});
@@ -231,10 +293,16 @@ async def test_dashboard_renders_phone_safe_today_session_hud_above_task_dock():
     assert 'data-work-session-progress' in html
     assert 'data-work-session-timer-toggle' in html
     assert 'data-work-session-adjust-plan' in html
+    assert 'data-mobile-today-complete' in html
+    assert 'Done &amp; next' in html
     assert "getItem: identity => [...todayMyWork, ...activeMyWork].find" in html
     assert "onReopen: identity =>" in html
+    assert "onComplete: identity =>" in html
+    assert "completeTodayItem(item)" in html
     assert "workSession.reopen(item)" in html
     assert '.mobile-today-hud { display:none;' in html
+    assert 'grid-template-areas:' in html
+    assert '[data-mobile-today-complete] { grid-area:complete;' in html
     assert 'bottom:calc(56px + env(safe-area-inset-bottom))' in html
     assert '.mobile-today-hud button { min-height:44px;' in html
     assert '.mobile-task-action[hidden] { display:none;' in html
-- 
2.43.0