feat: add mobile issue detail navigation (Closes #961)

frontend/dashboard.css

@@ -469,6 +469,25 @@ textarea { resize: vertical; min-height: 120px; }
 .issue-sheet-panel { width:min(560px,100%); height:100%; overflow:auto; padding:18px; background:#0b1526; border-left:1px solid #2a496e; }
 .issue-sheet-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
 .issue-sheet-header button { min-height:44px; }
+.mobile-issue-detail-nav { display:none; }
+@media (max-width:600px) {
+  .issue-sheet-panel { padding-top:max(12px,env(safe-area-inset-top)); }
+  .mobile-issue-detail-nav {
+    position:sticky; top:env(safe-area-inset-top); z-index:6;
+    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px;
+    margin:8px -6px 12px; padding:6px;
+    background:rgba(11,21,38,.98); border-block:1px solid #2a496e;
+  }
+  .mobile-issue-detail-nav button {
+    min-width:0; min-height:44px; padding:4px; overflow-wrap:anywhere;
+    border-color:transparent; font-size:12px;
+  }
+  .mobile-issue-detail-nav button[aria-current="location"] {
+    border-color:#60a5fa; background:#17365a; color:#fff;
+  }
+  #issue-overview, #issue-conversation, #issue-comment, #issue-planning { scroll-margin-top:72px; }
+}
+@media (min-width:601px) { .mobile-issue-detail-nav { display:none; } }
 .completed-filed-actions { position:fixed; right:0; bottom:0; z-index:57; box-sizing:border-box; width:min(560px,100%); display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:8px; margin:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border:1px solid #4ade80; border-radius:12px 0 0; background:rgba(11,21,38,.98); overflow-wrap:anywhere; }
 .completed-filed-actions[hidden] { display:none; }
 .completed-filed-actions button { min-height:44px; min-width:0; }

frontend/dashboard.js

@@ -15,6 +15,20 @@
     ],
   });
   mobileComposerViewport.start();
+  const issueDetailPanel = qs('#issue-sheet .issue-sheet-panel');
+  const mobileIssueDetailNavigation = createMobileIssueDetailNavigation({
+    root:issueDetailPanel,
+    buttons:Object.fromEntries(Array.from(document.querySelectorAll('[data-issue-section]')).map(button => [button.dataset.issueSection, button])),
+    targets:{
+      overview:qs('#issue-overview'),
+      conversation:qs('#issue-conversation'),
+      reply:qs('#issue-comment'),
+      actions:qs('#issue-planning'),
+    },
+    planning:qs('#issue-planning'),
+    prefersReducedMotion:() => window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+  });
+  mobileIssueDetailNavigation.start();
   [
     [qs('.app-menu'), qs('#app-menu-toggle')],
     [qs('.work-settings'), qs('#work-settings-toggle')],

frontend/index.html

@@ -634,6 +634,12 @@
       </div>
       <button id="close-issue-sheet" type="button">Close sheet</button>
     </div>
+    <nav class="mobile-issue-detail-nav" aria-label="Issue sections">
+      <button type="button" data-issue-section="overview">Overview</button>
+      <button type="button" data-issue-section="conversation">Conversation</button>
+      <button type="button" data-issue-section="reply">Reply</button>
+      <button type="button" data-issue-section="actions">Plan & actions</button>
+    </nav>
     <div id="issue-sheet-status" class="small" aria-live="polite">Choose an issue.</div>
     <section class="completed-filed-actions" id="completed-filed-actions" aria-label="Completed Filed review" hidden>
       <span id="completed-filed-progress" role="status" aria-live="polite">Completed Filed issue ready for review.</span>
@@ -644,7 +650,7 @@
     </section>
     <button class="issue-retry" id="retry-issue-load" type="button" hidden>Reload latest issue</button>
     <div class="row"><span id="issue-labels"></span><span class="small" id="issue-assignees"></span></div>
-    <div class="issue-sheet-content markdown-content" id="issue-sheet-body"></div>
+    <div id="issue-overview"><div class="issue-sheet-content markdown-content" id="issue-sheet-body"></div></div>
     <form class="checklist-step-editor" id="checklist-step-editor" aria-label="Manage checklist step" hidden>
       <label for="checklist-step-label">Checklist step</label>
       <input id="checklist-step-label" type="text" maxlength="240" autocomplete="off" />
@@ -688,6 +694,7 @@
         <button id="cancel-issue-blocker" type="button">Cancel</button>
       </div>
     </section>
+    <div id="issue-conversation" tabindex="-1"></div>
     <h2>Full conversation</h2>
     <div id="issue-comments"></div>
     <button class="conversation-more" id="load-older-issue-comments" type="button" hidden>Load older messages</button>
@@ -1529,6 +1536,7 @@
 <script src="static/mention-composer.js"></script>
 <script src="static/push-notifications.js"></script>
 <script src="static/issue-filing-receipt.js"></script>
+<script src="static/mobile-issue-detail-nav.js"></script>
 <script src="static/dashboard.js"></script>
 </body>
 </html>

frontend/mobile-issue-detail-nav.js

@@ -0,0 +1,70 @@
+function createMobileIssueDetailNavigation(options) {
+  const buttons = options.buttons || {};
+  const targets = options.targets || {};
+  const listeners = new Map();
+  const prefersReducedMotion = options.prefersReducedMotion || (() => false);
+  const targetNames = new Map(Object.entries(targets).map(([name, target]) => [target, name]));
+  let observer = null;
+
+  function select(name) {
+    Object.entries(buttons).forEach(([key, button]) => {
+      if (!button) return;
+      if (key === name) button.setAttribute('aria-current', 'location');
+      else button.removeAttribute('aria-current');
+    });
+  }
+
+  function navigate(name) {
+    const target = targets[name];
+    if (!target) return false;
+    if (name === 'actions' && options.planning) options.planning.open = true;
+    target.scrollIntoView({
+      block: 'start',
+      behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+    });
+    if (name === 'reply') target.focus();
+    select(name);
+    return true;
+  }
+
+  return {
+    start() {
+      Object.entries(buttons).forEach(([name, button]) => {
+        if (!button || listeners.has(button)) return;
+        const listener = event => {
+          event.preventDefault();
+          navigate(name);
+        };
+        listeners.set(button, listener);
+        button.addEventListener('click', listener);
+      });
+      select('overview');
+      const observe = options.observe || ((handler, observedTargets) => {
+        if (typeof IntersectionObserver === 'undefined') return null;
+        const instance = new IntersectionObserver(handler, {
+          root: options.root || null,
+          rootMargin: '-20% 0px -60% 0px',
+          threshold: [0, 0.25, 0.5, 0.75, 1],
+        });
+        observedTargets.forEach(target => instance.observe(target));
+        return instance;
+      });
+      observer = observe(entries => {
+        const visible = entries
+          .filter(entry => entry.isIntersecting && targetNames.has(entry.target))
+          .sort((left, right) => right.intersectionRatio - left.intersectionRatio)[0];
+        if (visible) select(targetNames.get(visible.target));
+      }, Array.from(targetNames.keys()).filter(Boolean));
+    },
+    stop() {
+      listeners.forEach((listener, button) => button.removeEventListener('click', listener));
+      listeners.clear();
+      if (observer) observer.disconnect();
+      observer = null;
+    },
+    navigate,
+    select,
+  };
+}
+
+if (typeof module !== 'undefined') module.exports = createMobileIssueDetailNavigation;

frontend/service-worker.js

@@ -75,6 +75,7 @@ const SHELL = [
   BASE + 'static/issue-attachment.js',
   BASE + 'static/issue-filing-review.js',
   BASE + 'static/issue-sheet.js',
+  BASE + 'static/mobile-issue-detail-nav.js',
   BASE + 'static/checklist-conflict.js',
   BASE + 'static/voice-transcript-store.js',
   BASE + 'static/voice-issue-capture.js',