frontend/dashboard.css

@@ -280,6 +280,15 @@ textarea { resize: vertical; min-height: 120px; }
 .event { padding: 8px 0; border-bottom: 1px solid #1b2d45; }
 .event:last-child { border-bottom: 0; }
 .my-work { grid-column: 1 / -1; }
+.progressive-work-detail { position:fixed; inset:0; z-index:120; display:flex; align-items:flex-end; justify-content:center; background:rgba(5,12,21,.82); backdrop-filter:blur(4px); }
+.progressive-work-detail[hidden] { display:none; }
+.progressive-work-detail-panel { box-sizing:border-box; width:min(560px,100%); max-height:100dvh; overflow:auto; overflow-x:hidden; padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); border:1px solid #55d6be; border-radius:18px 18px 0 0; background:#0b1526; overflow-wrap:anywhere; }
+.progressive-work-detail-panel header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
+.progressive-work-detail-panel h2, .progressive-work-detail-panel p { margin-top:0; }
+.progressive-work-detail-panel button, .progressive-work-detail-panel .button-link { box-sizing:border-box; min-height:44px; }
+.progressive-work-detail-panel .button-link { display:flex; align-items:center; justify-content:center; width:100%; }
+@media(max-width:320px) { .progressive-work-detail-panel { width:100%; padding-inline:14px; } }
+
 .plan-today-sheet { position:fixed; inset:0; z-index:75; display:flex; justify-content:flex-end; background:rgba(5,12,21,.78); backdrop-filter:blur(4px); }
 .plan-today-sheet[hidden] { display:none; }
 .plan-today-panel { box-sizing:border-box; width:min(620px,100%); height:100%; overflow:auto; overflow-x:hidden; padding:18px; background:#0b1526; border-left:1px solid #2a496e; }

frontend/dashboard.js

@@ -8453,6 +8453,16 @@
     adoptedProgressiveSnapshot = await contextPoller.adoptPending(progressiveWorkHandoff.liveSnapshotPromise);
   }
   if (!adoptedProgressiveSnapshot) await load();
+  if (progressiveWorkHandoff?.openWork) {
+    const progressiveItem = lastMyWork.find(item =>
+      item.repository === progressiveWorkHandoff.openWork.repository &&
+      Number(item.number) === Number(progressiveWorkHandoff.openWork.number));
+    if (progressiveItem) {
+      openRoutedWork(progressiveItem, null);
+      qs('#progressive-work-detail').hidden = true;
+    }
+  }
+
   await appShortcut.run();
   document.addEventListener('visibilitychange', () => {
     contextPoller.setVisible(!document.hidden);

frontend/index.html

@@ -375,6 +375,19 @@
       </div>
     </div>
   </section>
+  <section class="progressive-work-detail" id="progressive-work-detail" role="dialog" aria-modal="true" aria-labelledby="progressive-work-detail-title" hidden>
+    <div class="progressive-work-detail-panel">
+      <header>
+        <div><p class="small muted">My Work</p><h2 id="progressive-work-detail-title">Work item</h2></div>
+        <button id="close-progressive-work-detail" type="button">Close</button>
+      </header>
+      <p class="small" id="progressive-work-detail-meta"></p>
+      <p id="progressive-work-detail-reason"></p>
+      <p class="muted">The full workspace is still loading. You can read this assignment now or open it in Gitea.</p>
+      <a class="button-link" id="open-progressive-work-gitea" href="" hidden>Open in Gitea</a>
+    </div>
+  </section>
+
   <dialog class="release-receipt-sheet" id="release-receipt-sheet" aria-labelledby="release-receipt-title">
     <section class="release-receipt-panel">
       <header><div><p class="small muted">Exact merge evidence</p><h2 id="release-receipt-title">Release watchlist</h2></div><button id="close-release-receipt" type="button">Close</button></header>

frontend/progressive-my-work.js

@@ -3,6 +3,12 @@ function createProgressiveMyWork({
 }) {
   const list = document.querySelector('#my-work-list');
   const status = document.querySelector('#my-work-status');
+  const detail = document.querySelector('#progressive-work-detail');
+  const detailTitle = document.querySelector('#progressive-work-detail-title');
+  const detailMeta = document.querySelector('#progressive-work-detail-meta');
+  const detailReason = document.querySelector('#progressive-work-detail-reason');
+  const closeDetail = document.querySelector('#close-progressive-work-detail');
+  const openGitea = document.querySelector('#open-progressive-work-gitea');
   const filters = Array.from(document.querySelectorAll('[data-work-filter]'));
   const listeners = [];
   const lifecycleListeners = [];
@@ -14,6 +20,8 @@ function createProgressiveMyWork({
   let liveSnapshotPromise = null;
   let confirmedLogin = '';
   let poller = null;
+  let detailTrigger = null;
+  let openWork = null;
   const deferredQueues = {
     today:'Today', agenda:'Agenda', later:'Later', draft:'Drafts',
   };
@@ -35,6 +43,28 @@ 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 closeProgressiveDetail = ({ restoreFocus = true } = {}) => {
+    if (!detail || detail.hidden) return;
+    detail.hidden = true;
+    if (restoreFocus) detailTrigger?.focus?.();
+    detailTrigger = null;
+    openWork = null;
+  };
+  const openProgressiveDetail = (item, trigger) => {
+    if (!detail || !item) return;
+    detailTrigger = trigger;
+    openWork = item;
+    detailTitle.textContent = item.title || item.key || 'Untitled work';
+    detailMeta.textContent = (item.key || 'Unknown work item') + ' · ' +
+      (item.kind === 'pull' ? 'Pull request' : 'Issue');
+    detailReason.textContent = item.reason || 'Assigned to you';
+    const href = safeUrl(item.url);
+    openGitea.hidden = !href;
+    if (href) openGitea.href = href;
+    else openGitea.removeAttribute?.('href');
+    detail.hidden = false;
+    closeDetail?.focus?.();
+  };
   const updateCounts = () => {
     ['all','attention','filed','authored','issue','pull','review','update'].forEach(filter => {
       const count = filter === 'all' ? items.length : items.filter(item => matches(item, filter)).length;
@@ -46,15 +76,14 @@ function createProgressiveMyWork({
     if (stopped || !list) return;
     const visible = visibleItems();
     list.innerHTML = deferredQueues[active] ?
-      '<div class="muted">' + deferredQueues[active] + ' is still loading…</div>' : visible.length ? visible.map(item => {
+      '<div class="muted">' + deferredQueues[active] + ' is still loading…</div>' : visible.length ? visible.map((item, index) => {
-      const href = safeUrl(item.url);
       const title = escapeHtml(item.title || item.key || 'Untitled work');
       const context = escapeHtml(item.key || '');
       const reason = escapeHtml(item.reason || 'Assigned to you');
       return '<article class="my-work-card progressive-my-work-card">' +
-        (href ? '<a class="my-work-card-main" href="' + escapeHtml(href) + '">' : '<div class="my-work-card-main">') +
+        '<button class="my-work-card-main" type="button" data-progressive-work-index="' + index + '">' +
         '<strong>' + title + '</strong><span class="small">' + context + ' · ' + reason + '</span>' +
-        (href ? '</a>' : '</div>') + '</article>';
+        '</button></article>';
     }).join('') : '<div class="muted">No work in this queue.</div>';
     filters.forEach(button => button.setAttribute('aria-pressed', String(button.dataset.workFilter === active)));
   };
@@ -63,6 +92,23 @@ function createProgressiveMyWork({
     button.addEventListener('click', listener);
     listeners.push([button, listener]);
   });
+  const openListener = event => {
+    const trigger = event.target?.closest?.('[data-progressive-work-index]');
+    if (!trigger) return;
+    const item = visibleItems()[Number(trigger.dataset.progressiveWorkIndex)];
+    if (!item) return;
+    event.preventDefault?.();
+    openProgressiveDetail(item, trigger);
+  };
+  const closeListener = () => closeProgressiveDetail();
+  const keyListener = event => {
+    if (event.key !== 'Escape' || detail?.hidden) return;
+    event.preventDefault?.();
+    closeProgressiveDetail();
+  };
+  list?.addEventListener?.('click', openListener);
+  closeDetail?.addEventListener?.('click', closeListener);
+  lifecycleTarget.addEventListener?.('keydown', keyListener);
 
   const applySnapshot = snapshot => {
     if (stopped) return false;
@@ -102,6 +148,13 @@ function createProgressiveMyWork({
     login() { return confirmedLogin; },
     handoff() {
       const state = { selectedFilter:selectedByUser ? active : null };
+      if (openWork) {
+        state.openWork = {
+          kind:openWork.kind, key:openWork.key, number:openWork.number,
+          repository:openWork.repository,
+        };
+        openWork = null;
+      }
       if (liveSnapshot) {
         state.liveSnapshot = liveSnapshot;
         liveSnapshot = null;
@@ -142,6 +195,9 @@ function createProgressiveMyWork({
       stopped = true;
       poller?.stop();
       listeners.forEach(([button, listener]) => button.removeEventListener?.('click', listener));
+      list?.removeEventListener?.('click', openListener);
+      closeDetail?.removeEventListener?.('click', closeListener);
+      lifecycleTarget.removeEventListener?.('keydown', keyListener);
       lifecycleListeners.forEach(([eventName, listener]) =>
         lifecycleTarget.removeEventListener?.(eventName, listener));
     },

tests/test_progressive_my_work.py

@@ -6,6 +6,8 @@ from pathlib import Path
 MODULE = Path(__file__).parents[1] / "frontend" / "progressive-my-work.js"
 MY_WORK = Path(__file__).parents[1] / "frontend" / "my-work.js"
 DASHBOARD = Path(__file__).parents[1] / "frontend" / "dashboard.js"
+INDEX = Path(__file__).parents[1] / "frontend" / "index.html"
+CSS = Path(__file__).parents[1] / "frontend" / "dashboard.css"
 
 
 def test_progressive_my_work_renders_and_filters_assigned_work_before_full_workspace():
@@ -35,7 +37,8 @@ const flow=createProgressiveMyWork({{document,fetchSnapshot:async()=>({{
     state = json.loads(result.stdout)
     assert state["status"] == "1 assigned work item ready."
     assert "Fix mobile queue" in state["rendered"]
-    assert 'href="https://forge.example/issues/7"' in state["rendered"]
+    assert 'data-progressive-work-index="0"' in state["rendered"]
+    assert "href=" not in state["rendered"]
     assert state["pressed"] == ["false", "true"]
 
 
@@ -292,7 +295,7 @@ const flow=context.module.exports({{
         "reconnecting": "Assigned work is reconnecting…",
         "attempts": 2,
         "status": "1 assigned work item ready.",
-        "html": '<article class="my-work-card progressive-my-work-card"><a class="my-work-card-main" href="https://forge.example/issues/9"><strong>Recovered assignment</strong><span class="small">stackchain/dashboard#9 · Assigned to you</span></a></article>',
+        "html": '<article class="my-work-card progressive-my-work-card"><button class="my-work-card-main" type="button" data-progressive-work-index="0"><strong>Recovered assignment</strong><span class="small">stackchain/dashboard#9 · Assigned to you</span></button></article>',
     }
 
 
@@ -363,5 +366,92 @@ const flow=context.module.exports({{
         "hasSignal": True,
     }
     assert state["latestTitle"] == "New assignment"
-    assert state["removed"] == ["online", "visibilitychange"]
+    assert state["removed"] == ["keydown", "online", "visibilitychange"]
     assert state["status"] == "1 assigned work item ready."
+
+
+def test_progressive_card_opens_safe_in_app_detail_and_hands_it_off_once():
+    harness = f"""
+const fs=require('fs'); const vm=require('vm');
+function element(extra={{}}) {{
+  return Object.assign({{
+    hidden:false,textContent:'',attrs:{{}},listeners:{{}},focusCount:0,
+    addEventListener(name,cb){{this.listeners[name]=cb;}},
+    removeEventListener(name,cb){{if(this.listeners[name]===cb)delete this.listeners[name];}},
+    setAttribute(name,value){{this.attrs[name]=String(value);}},
+    removeAttribute(name){{delete this.attrs[name];}},
+    focus(){{this.focusCount += 1;}},
+  }},extra);
+}}
+const list=element({{innerHTML:''}}); const status=element();
+const sheet=element({{hidden:true}}); const title=element(); const meta=element(); const reason=element();
+const close=element(); const gitea=element({{hidden:true,href:''}});
+const elements={{
+  '#my-work-list':list,'#my-work-status':status,'#progressive-work-detail':sheet,
+  '#progressive-work-detail-title':title,'#progressive-work-detail-meta':meta,
+  '#progressive-work-detail-reason':reason,'#close-progressive-work-detail':close,
+  '#open-progressive-work-gitea':gitea,
+}};
+const document={{querySelector:s=>elements[s]||null,querySelectorAll:()=>[]}};
+const lifecycleTarget=element();
+const context={{module:{{exports:{{}}}},exports:{{}},console,URL,document}}; vm.createContext(context);
+vm.runInContext(fs.readFileSync({json.dumps(str(MY_WORK))},'utf8'),context);
+context.buildMyWork=context.module.exports; context.module={{exports:{{}}}};
+vm.runInContext(fs.readFileSync({json.dumps(str(MODULE))},'utf8'),context);
+const flow=context.module.exports({{document,lifecycleTarget,fetchSnapshot:async()=>({{
+  user:{{login:'timmy'}},issues:[{{number:7,title:'<img src=x onerror=alert(1)>',repository:'stackchain/dashboard',assignees:['timmy'],url:'https://forge.example/issues/7'}}],pull_requests:[]
+}})}});
+(async()=>{{
+  await flow.start();
+  const trigger=element({{dataset:{{progressiveWorkIndex:'0'}},closest:()=>trigger}});
+  list.listeners.click({{target:trigger,preventDefault(){{}}}});
+  const opened={{sheetHidden:sheet.hidden,title:title.textContent,meta:meta.textContent,reason:reason.textContent,giteaHidden:gitea.hidden,giteaHref:gitea.href,html:list.innerHTML}};
+  lifecycleTarget.listeners.keydown({{key:'Escape',preventDefault(){{}}}});
+  list.listeners.click({{target:trigger,preventDefault(){{}}}});
+  const first=flow.handoff(); const second=flow.handoff();
+  console.log(JSON.stringify({{opened,closed:sheet.hidden,focusCount:trigger.focusCount,first,second}}));
+}})().catch(error=>{{console.error(error);process.exit(1);}});
+"""
+    result = subprocess.run(["node", "-e", harness], check=True, capture_output=True, text=True)
+    state = json.loads(result.stdout)
+
+    assert state["opened"] == {
+        "sheetHidden": False,
+        "title": "<img src=x onerror=alert(1)>",
+        "meta": "stackchain/dashboard#7 · Issue",
+        "reason": "Assigned to you",
+        "giteaHidden": False,
+        "giteaHref": "https://forge.example/issues/7",
+        "html": '<article class="my-work-card progressive-my-work-card"><button class="my-work-card-main" type="button" data-progressive-work-index="0"><strong>&lt;img src=x onerror=alert(1)&gt;</strong><span class="small">stackchain/dashboard#7 · Assigned to you</span></button></article>',
+    }
+    assert state["closed"] is False
+    assert state["focusCount"] == 1
+    assert state["first"]["openWork"] == {
+        "kind": "issue",
+        "key": "stackchain/dashboard#7",
+        "number": 7,
+        "repository": "stackchain/dashboard",
+    }
+    assert "openWork" not in state["second"]
+
+
+def test_progressive_detail_is_mobile_safe_and_adopted_by_hydrated_workspace():
+    html = INDEX.read_text()
+    css = CSS.read_text()
+    dashboard = DASHBOARD.read_text()
+
+    assert 'id="progressive-work-detail" role="dialog" aria-modal="true"' in html
+    assert 'aria-labelledby="progressive-work-detail-title" hidden' in html
+    assert 'id="close-progressive-work-detail"' in html
+    assert 'id="open-progressive-work-gitea"' in html
+    assert ".progressive-work-detail[hidden] { display:none; }" in css
+    assert "max-height:100dvh" in css
+    assert "overflow-x:hidden" in css
+    assert "env(safe-area-inset-top)" in css
+    assert "env(safe-area-inset-bottom)" in css
+    assert ".progressive-work-detail-panel button, .progressive-work-detail-panel .button-link" in css
+    assert "min-height:44px" in css
+    assert "@media(max-width:320px)" in css
+    assert "progressiveWorkHandoff?.openWork" in dashboard
+    assert "openRoutedWork(progressiveItem, null)" in dashboard
+    assert "qs('#progressive-work-detail').hidden = true" in dashboard