feat: compact active Today controls on mobile (Closes #1074)

frontend/dashboard.css

@@ -981,6 +981,14 @@ textarea { resize: vertical; min-height: 120px; }
 
 .mobile-today-hud { display:none; }
 .mobile-today-hud[hidden], .mobile-today-hud[data-overlay-hidden="true"] { display:none; }
+.mobile-today-actions { box-sizing:border-box; width:min(520px,100%); max-width:none; max-height:100dvh; margin:auto 0 0; padding:0; border:0; border-radius:18px 18px 0 0; color:var(--text); background:#102641; }
+.mobile-today-actions::backdrop { background:rgba(3,9,18,.76); }
+.mobile-today-actions-panel { box-sizing:border-box; display:grid; gap:12px; padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
+.mobile-today-actions-panel header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
+.mobile-today-actions-panel h2 { margin:0; }
+.mobile-today-navigation, .mobile-today-secondary-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
+.mobile-today-actions-panel button { min-width:0; min-height:44px; }
+.mobile-today-secondary-actions [data-mobile-today-end] { grid-column:1 / -1; border-color:#b45309; }
 .today-session-handoff { position:fixed; left:12px; right:12px; bottom:calc(68px + env(safe-area-inset-bottom)); z-index:45; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px; border:1px solid #60a5fa; border-radius:12px; background:rgba(16,38,65,.98); box-shadow:0 8px 28px rgba(0,0,0,.35); }
 .today-session-handoff[hidden] { display:none; }
 .today-session-handoff button { min-height:44px; }
@@ -994,7 +1002,7 @@ textarea { resize: vertical; min-height: 120px; }
 .attention-interruption button { min-height:44px; flex:0 0 auto; }
 @media (max-width: 600px) {
   body { padding-bottom:calc(66px + env(safe-area-inset-bottom)); }
-  body.mobile-today-active { padding-bottom:calc(166px + env(safe-area-inset-bottom)); }
+  body.mobile-today-active { padding-bottom:calc(var(--mobile-today-clearance, 166px) + env(safe-area-inset-bottom)); }
   header { min-height:56px; max-height:64px; padding:6px 10px; align-items:center; gap:8px; background:rgba(11,21,38,.98); }
   .app-brand .muted, #clock { display:none; }
   .app-live-status { margin-left:auto; }
@@ -1119,18 +1127,14 @@ textarea { resize: vertical; min-height: 120px; }
   .mobile-update-outcome { margin-top:12px; padding:12px; border:1px solid #31577f; border-radius:12px; background:#0b1b30; }
   .mobile-update-outcome p { margin:0 0 10px; }
   .mobile-update-outcome button { width:100%; min-height:44px; }
-  .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-mobile-today-update] { grid-column:1; width:100%; }
-  .mobile-today-hud [data-mobile-today-blocked] { grid-column:2; width:100%; }
-  .mobile-today-hud [data-today-break-open] { grid-column:1 / -1; }
-
-  .mobile-today-hud [data-work-session-adjust-plan] { grid-column:1 / -1; }
-  .today-completion-undo { bottom:calc(272px + env(safe-area-inset-bottom)); }
+  .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:repeat(6,minmax(0,1fr)); gap:4px; 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-column:1 / 4; 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-column:4 / 7; align-self:center; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .mobile-today-hud [data-mobile-today-complete] { grid-column:1 / 3; }
+  .mobile-today-hud [data-mobile-today-toggle] { grid-column:3 / 5; }
+  .mobile-today-hud [data-mobile-today-more] { grid-column:5 / 7; }
+  .mobile-today-hud button { min-width:0; min-height:44px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-inline:6px; }
+  .today-completion-undo { bottom:calc(var(--mobile-today-clearance, 166px) + 8px + env(safe-area-inset-bottom)); }
 }
 @media (min-width:701px) { .update-gesture-status { display:none; } }
 @media (prefers-reduced-motion: reduce) {

frontend/dashboard.js

@@ -235,6 +235,21 @@
     },
   });
   mobileTaskDock.start();
+  const mobileTodayActions = qs('#mobile-today-actions');
+  createMobileTodayCommandBar({
+    more:qs('[data-mobile-today-more]'),
+    sheet:mobileTodayActions,
+    close:qs('[data-mobile-today-actions-close]'),
+    firstAction:qs('[data-work-session-previous]', mobileTodayActions),
+    actionButtons:Array.from(mobileTodayActions.querySelectorAll(
+      '[data-work-session-previous], [data-work-session-next], [data-mobile-today-update], [data-mobile-today-blocked], [data-today-break-open], [data-work-session-adjust-plan]'
+    )),
+    endAction:qs('[data-mobile-today-end]', mobileTodayActions),
+    existingEndControl:qs('#end-today-session'),
+    hud:qs('[data-mobile-today-hud]'),
+    dock:qs('#mobile-task-dock'),
+    style:document.documentElement.style,
+  });
   const mobileInsights = createMobileInsights({
     root: qs('#insights-sheet'),
     launcher: qs('#open-insights'),

frontend/index.html

@@ -1533,14 +1533,27 @@
 
 <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-complete type="button" hidden>Done &amp; next</button>
   <button data-mobile-today-toggle data-work-session-timer-toggle type="button">Pause timer</button>
-  <button data-mobile-today-update type="button" hidden>Add update</button>
-  <button class="mobile-today-blocked" data-mobile-today-blocked type="button" hidden>Blocked</button>
-  <button data-today-break-open type="button">Take break</button>
-  <button data-work-session-adjust-plan type="button" hidden>Adjust remaining plan</button>
+  <button data-mobile-today-more type="button" aria-controls="mobile-today-actions" aria-haspopup="dialog">More</button>
 </section>
+<dialog class="mobile-today-actions" id="mobile-today-actions" aria-modal="true" aria-labelledby="mobile-today-actions-title">
+  <section class="mobile-today-actions-panel">
+    <header><h2 id="mobile-today-actions-title">Today session</h2><button data-mobile-today-actions-close type="button">Close</button></header>
+    <nav class="mobile-today-navigation" aria-label="Choose active Today item">
+      <button type="button" data-work-session-previous>Previous item</button>
+      <button type="button" data-work-session-next>Next work item</button>
+    </nav>
+    <div class="mobile-today-secondary-actions">
+      <button data-mobile-today-update type="button" hidden>Add update</button>
+      <button class="mobile-today-blocked" data-mobile-today-blocked type="button" hidden>Report blocker</button>
+      <button data-today-break-open type="button">Take break</button>
+      <button data-work-session-adjust-plan type="button" hidden>Adjust remaining plan</button>
+      <button data-mobile-today-end type="button">End session</button>
+    </div>
+  </section>
+</dialog>
 <dialog class="today-progress-sheet" id="today-progress-sheet" aria-labelledby="today-progress-title">
   <section class="today-progress-panel">
     <header><div><p class="small muted">Active Today item</p><h2 id="today-progress-title">Add progress update</h2></div><button id="cancel-today-progress" type="button">Cancel</button></header>
@@ -1785,6 +1798,7 @@
 <script src="static/task-overlay-history.js"></script>
 <script src="static/context-poller.js"></script>
 <script src="static/live-data-status.js"></script>
+<script src="static/mobile-today-command-bar.js"></script>
 <script src="static/mobile-task-dock.js"></script>
 <script src="static/mobile-pull-refresh.js"></script>
 <script src="static/mobile-work-entry.js"></script>

frontend/mobile-today-command-bar.js

@@ -0,0 +1,56 @@
+(function (root, factory) {
+  if (typeof module !== 'undefined' && module.exports) module.exports = factory;
+  else root.createMobileTodayCommandBar = factory;
+})(typeof window !== 'undefined' ? window : this, function createMobileTodayCommandBar({
+  more,
+  sheet,
+  close,
+  firstAction,
+  endAction,
+  existingEndControl,
+  actionButtons = [],
+  hud,
+  dock,
+  style,
+  ResizeObserverImpl = typeof ResizeObserver === 'undefined' ? null : ResizeObserver,
+}) {
+  if (!more || !sheet) return null;
+
+  const dismiss = () => {
+    if (sheet.open) sheet.close();
+  };
+  const open = () => {
+    if (sheet.open) return;
+    more.setAttribute('aria-expanded', 'true');
+    sheet.showModal();
+    firstAction?.focus();
+  };
+
+  more.setAttribute('aria-expanded', 'false');
+  more.addEventListener('click', open);
+  close?.addEventListener('click', dismiss);
+  actionButtons.forEach(button => button?.addEventListener('click', dismiss));
+  endAction?.addEventListener('click', () => {
+    dismiss();
+    existingEndControl?.click();
+  });
+  sheet.addEventListener('cancel', event => {
+    event.preventDefault();
+    dismiss();
+  });
+  sheet.addEventListener('close', () => {
+    more.setAttribute('aria-expanded', 'false');
+    more.focus();
+  });
+
+  const measure = () => {
+    if (!style || !hud || !dock) return;
+    style.setProperty('--mobile-today-clearance', `${hud.offsetHeight + dock.offsetHeight + 16}px`);
+  };
+  const observer = ResizeObserverImpl && hud && dock ? new ResizeObserverImpl(measure) : null;
+  observer?.observe(hud);
+  observer?.observe(dock);
+  measure();
+
+  return { open, close:dismiss, measure, destroy:() => observer?.disconnect() };
+});

frontend/service-worker.js

@@ -107,6 +107,7 @@ const SHELL = [
   BASE + 'static/task-overlay-history.js',
   BASE + 'static/context-poller.js',
   BASE + 'static/live-data-status.js',
+  BASE + 'static/mobile-today-command-bar.js',
   BASE + 'static/mobile-task-dock.js',
   BASE + 'static/mobile-work-entry.js',
   BASE + 'static/mobile-queue-launcher.js',