feat: make mobile dock progressive (Closes #1427)

frontend/dashboard.css

@@ -1521,6 +1521,7 @@ textarea { resize: vertical; min-height: 120px; }
   .mobile-queue-all summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:700; }
   .mobile-queue-list [data-unavailable="true"] { border-color:#f59e0b; }
   .mobile-queue-list [data-unavailable="true"]::after { content:'Sync unavailable · open to retry'; color:#fbbf24; font-size:.75rem; }
+  .mobile-queue-list [data-progressive-loading="true"]::after { content:'Still loading · available after workspace starts'; }
   .mobile-delivery-recovery { box-sizing:border-box; width: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-delivery-recovery::backdrop { background:rgba(3,9,18,.78); }
   .mobile-delivery-recovery-panel { box-sizing:border-box; display:grid; gap:12px; width:100%; padding:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); overflow-wrap:anywhere; }

frontend/dashboard.js

@@ -4,6 +4,8 @@
   const progressiveCaptureHandoff = window.stackchainProgressiveCapture?.handoff?.();
   const progressiveWorkHandoff = window.stackchainProgressiveMyWork?.handoff?.();
   const progressiveHumanGatesHandoff = window.stackchainProgressiveHumanGates?.handoff?.();
+  const progressiveMobileDockHandoff = window.stackchainProgressiveMobileDock?.handoff?.();
+  window.stackchainProgressiveMobileDock?.stop?.();
   window.stackchainProgressiveMyWork?.stop();
   const qs = (s, el=document) => el.querySelector(s);
   const announceWork = message => qs('#my-work-action-status').textContent = message;
@@ -307,6 +309,12 @@
     },
   });
   mobileTaskDock.start();
+  if (['work', 'queues'].includes(progressiveMobileDockHandoff?.lastTask)) {
+    mobileTaskDock.select(progressiveMobileDockHandoff.lastTask);
+  }
+  if (progressiveMobileDockHandoff?.queueSheetOpen && !qs('#mobile-queue-sheet').open) {
+    qs('#mobile-queue-sheet').showModal();
+  }
   const mobileTodayActions = qs('#mobile-today-actions');
   createMobileTodayCommandBar({
     more:qs('[data-mobile-today-more]'),

frontend/index.html

@@ -2325,6 +2325,7 @@
 <script src="static/my-work.js"></script>
 <script src="static/progressive-live-snapshot.js"></script>
 <script src="static/progressive-my-work.js"></script>
+<script src="static/progressive-mobile-dock.js"></script>
 <script src="static/progressive-capture.js"></script>
 <script src="static/agenda-replan.js"></script>
 <script src="static/agenda-calendar.js"></script>

frontend/progressive-mobile-dock.js

@@ -0,0 +1,119 @@
+(function (root, factory) {
+  if (typeof module === 'object' && module.exports) module.exports = factory;
+  else root.createProgressiveMobileDock = factory;
+})(typeof self !== 'undefined' ? self : this, function createProgressiveMobileDock(options) {
+  const document = options.document;
+  const myWork = options.myWork;
+  const work = document.querySelector('[data-mobile-task="work"]');
+  const queues = document.querySelector('[data-mobile-task="queues"]');
+  const sheet = document.querySelector('#mobile-queue-sheet');
+  const close = document.querySelector('#close-mobile-queues');
+  const next = document.querySelector('#mobile-queue-next-action');
+  const rows = Object.fromEntries(Array.from(document.querySelectorAll('[data-mobile-queue]'))
+    .map(row => [row.dataset.mobileQueue, row]));
+  const countElements = Object.fromEntries(Array.from(document.querySelectorAll('[data-mobile-queue-count]'))
+    .map(element => [element.dataset.mobileQueueCount, element]));
+  const originalDescriptions = Object.fromEntries(Object.entries(rows)
+    .map(([name, row]) => [name, row.querySelector?.('small')?.textContent || '']));
+  const originalCounts = Object.fromEntries(Object.entries(countElements)
+    .map(([name, element]) => [name, element.textContent]));
+  const supported = new Set(['all', 'attention', 'filed', 'authored', 'issue', 'pull', 'review', 'update']);
+  const listeners = [];
+  let started = false;
+  let lastTask = null;
+  let unsubscribe = null;
+
+  function listen(element, name, listener) {
+    if (!element) return;
+    element.addEventListener(name, listener);
+    listeners.push([element, name, listener]);
+  }
+
+  function render() {
+    const counts = myWork?.counts?.() || {};
+    Object.entries(rows).forEach(([name, row]) => {
+      const count = Math.max(0, Number(counts[name]) || 0);
+      const countElement = countElements[name];
+      if (supported.has(name)) {
+        row.removeAttribute('data-unavailable');
+        row.removeAttribute('data-progressive-loading');
+        if (countElement) countElement.textContent = String(count);
+        return;
+      }
+      row.setAttribute('data-unavailable', 'true');
+      row.setAttribute('data-progressive-loading', 'true');
+      const description = row.querySelector?.('small');
+      if (description) description.textContent = 'Still loading';
+      if (countElement) countElement.textContent = '…';
+    });
+    const actionable = ['attention', 'filed', 'authored', 'review', 'update']
+      .find(name => Number(counts[name]) > 0);
+    if (next) {
+      if (actionable) {
+        next.textContent = 'Open ' + (actionable === 'authored' ? 'My PRs' : actionable[0].toUpperCase() + actionable.slice(1))
+          + ' (' + counts[actionable] + ')';
+        next.dataset.queue = actionable;
+        next.removeAttribute('data-unavailable');
+      } else {
+        next.textContent = Number(counts.all) > 0 ? 'Open assigned work (' + counts.all + ')' : 'Assigned work is still loading';
+        next.dataset.queue = 'all';
+        if (!Number(counts.all)) next.setAttribute('data-unavailable', 'true');
+      }
+    }
+  }
+
+  function openSheet() {
+    lastTask = 'queues';
+    render();
+    if (sheet && !sheet.open) sheet.showModal();
+  }
+
+  function openQueue(name) {
+    if (!supported.has(name)) return false;
+    lastTask = 'work';
+    if (sheet?.open) sheet.close();
+    myWork?.selectQueue?.(name, {openFirst:true});
+    return true;
+  }
+
+  function start() {
+    if (started) return false;
+    started = true;
+    listen(work, 'click', () => { lastTask = 'work'; myWork?.openFirst?.(); });
+    listen(queues, 'click', openSheet);
+    listen(close, 'click', () => sheet?.open && sheet.close());
+    Object.entries(rows).forEach(([name, row]) => listen(row, 'click', () => openQueue(name)));
+    listen(next, 'click', () => openQueue(next.dataset.queue || 'all'));
+    unsubscribe = myWork?.subscribe?.(render) || null;
+    render();
+    return true;
+  }
+
+  function handoff() {
+    return {queueSheetOpen:Boolean(sheet?.open), lastTask};
+  }
+
+  function stop() {
+    listeners.splice(0).forEach(([element, name, listener]) => element.removeEventListener(name, listener));
+    unsubscribe?.();
+    unsubscribe = null;
+    Object.entries(rows).forEach(([name, row]) => {
+      row.removeAttribute('data-unavailable');
+      row.removeAttribute('data-progressive-loading');
+      const description = row.querySelector?.('small');
+      if (description) description.textContent = originalDescriptions[name];
+      if (countElements[name]) countElements[name].textContent = originalCounts[name];
+    });
+    started = false;
+  }
+
+  return {start, stop, handoff, render, openQueue};
+});
+
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  window.stackchainProgressiveMobileDock = createProgressiveMobileDock({
+    document,
+    myWork:window.stackchainProgressiveMyWork,
+  });
+  window.stackchainProgressiveMobileDock.start();
+}

frontend/progressive-my-work.js

@@ -13,6 +13,7 @@ function createProgressiveMyWork({
   const filters = Array.from(document.querySelectorAll('[data-work-filter]'));
   const listeners = [];
   const lifecycleListeners = [];
+  const subscribers = new Set();
   let items = [];
   let active = 'all';
   let stopped = false;
@@ -47,6 +48,15 @@ function createProgressiveMyWork({
             filter === 'authored' ? item.is_authored :
               filter === 'pull' ? item.kind === 'pull' && !item.is_review : item.kind === filter;
   const visibleItems = () => active === 'all' ? items : items.filter(item => matches(item, active));
+  const notify = () => subscribers.forEach(subscriber => subscriber());
+  const queueCounts = () => ({
+    all:items.length,
+    filed:items.filter(item => matches(item, 'filed')).length,
+    authored:items.filter(item => matches(item, 'authored')).length,
+    attention:items.filter(item => matches(item, 'attention')).length,
+    update:items.filter(item => matches(item, 'update')).length,
+    review:items.filter(item => matches(item, 'review')).length,
+  });
   const closeProgressiveDetail = ({ restoreFocus = true } = {}) => {
     if (!detail || detail.hidden) return;
     detail.hidden = true;
@@ -124,6 +134,7 @@ function createProgressiveMyWork({
     items = buildMyWork({ ...context, notifications:snapshot?.notifications || context.notifications || [] });
     updateCounts();
     render();
+    notify();
     const assigned = items.filter(item => item.is_assigned).length;
     if (status) status.textContent = assigned + ' assigned work item' + (assigned === 1 ? '' : 's') + ' ready.';
     return true;
@@ -150,6 +161,27 @@ function createProgressiveMyWork({
 
   return {
     login() { return confirmedLogin; },
+    counts() { return queueCounts(); },
+    subscribe(subscriber) {
+      subscribers.add(subscriber);
+      return () => subscribers.delete(subscriber);
+    },
+    openFirst() {
+      const item = visibleItems()[0];
+      if (!item) return deferredQueues[active] ? 'loading' : 'empty';
+      const trigger = list?.querySelector?.('[data-progressive-work-index="0"]') || null;
+      openProgressiveDetail(item, trigger);
+      return 'opened';
+    },
+    selectQueue(name, {openFirst = false} = {}) {
+      const allowed = new Set(['all','attention','filed','authored','issue','pull','review','update','today','agenda','later','draft']);
+      if (!allowed.has(name)) return 'unsupported';
+      active = name;
+      selectedByUser = true;
+      render();
+      notify();
+      return openFirst ? this.openFirst() : 'selected';
+    },
     handoff() {
       const state = { selectedFilter:selectedByUser ? active : null };
       if (openWork) {
@@ -204,6 +236,7 @@ function createProgressiveMyWork({
       lifecycleTarget.removeEventListener?.('keydown', keyListener);
       lifecycleListeners.forEach(([eventName, listener]) =>
         lifecycleTarget.removeEventListener?.(eventName, listener));
+      subscribers.clear();
     },
   };
 }

frontend/service-worker.js

@@ -1,7 +1,7 @@
 const BASE = new URL('./', self.location.href).pathname;
 importScripts(BASE + 'static/private-data-registry.js');
 importScripts(BASE + 'static/background-issue-sync.js');
-const CACHE = 'stackchain-dashboard-shell-v142';
+const CACHE = 'stackchain-dashboard-shell-v143';
 const OFFLINE_LEASE_URL = new URL(BASE + '__offline-session-lease', self.location.origin).href;
 const OUTAGE_STATUSES = new Set([500, 502, 503, 504]);
 const NAVIGATION_TIMEOUT_MS = self.__STACKCHAIN_NAVIGATION_TIMEOUT_MS || 4000;
@@ -190,6 +190,7 @@ const SHELL = [
   BASE + 'static/my-work.js',
   BASE + 'static/progressive-live-snapshot.js',
   BASE + 'static/progressive-my-work.js',
+  BASE + 'static/progressive-mobile-dock.js',
   BASE + 'static/progressive-capture.js',
   BASE + 'static/agenda-replan.js',
   BASE + 'static/agenda-calendar.js',